<template>
  <div class="list-view-layout-editor">
    <div class="flex h-full">
      <!-- Selected Fields Area -->
      <div class="flex-1 p-4 overflow-auto">
        <div class="mb-4 flex justify-between items-center">
          <h3 class="text-lg font-semibold">{{ layoutName || 'List View Layout' }}</h3>
          <div class="flex gap-2">
            <Button variant="outline" size="sm" @click="handleClear">
              Clear All
            </Button>
            <Button size="sm" @click="handleSave">
              Save Layout
            </Button>
          </div>
        </div>
        
        <div class="border rounded-lg bg-slate-50 dark:bg-slate-900 p-4 min-h-[400px]">
          <p class="text-sm text-muted-foreground mb-4">
            Drag fields to reorder them. Fields will appear in the list view in this order.
          </p>
          
          <div v-if="selectedFields.length === 0" class="text-center py-8 text-muted-foreground">
            <p>No fields selected.</p>
            <p class="text-sm">Click or drag fields from the right panel to add them.</p>
          </div>
          
          <div 
            v-else 
            ref="sortableContainer"
            class="space-y-2"
          >
            <div
              v-for="(field, index) in selectedFields"
              :key="field.id"
              class="p-3 border rounded cursor-move bg-white dark:bg-slate-800 hover:border-primary transition-colors flex items-center justify-between"
              draggable="true"
              @dragstart="handleDragStart($event, index)"
              @dragover.prevent="handleDragOver($event, index)"
              @drop="handleDrop($event, index)"
            >
              <div class="flex items-center gap-3">
                <span class="text-muted-foreground cursor-grab">
                  <GripVertical class="w-4 h-4" />
                </span>
                <div>
                  <div class="font-medium text-sm">{{ field.label }}</div>
                  <div class="text-xs text-muted-foreground">
                    {{ field.apiName }} • {{ formatFieldType(field.type) }}
                  </div>
                </div>
              </div>
              <Button
                variant="ghost"
                size="sm"
                class="text-destructive hover:text-destructive"
                @click="removeField(field.id)"
              >
                <X class="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>
      </div>

      <!-- Available Fields Sidebar -->
      <div class="w-80 border-l bg-white dark:bg-slate-950 p-4 overflow-auto">
        <h3 class="text-lg font-semibold mb-4">Available Fields</h3>
        <p class="text-xs text-muted-foreground mb-4">Click or drag to add field to list</p>
        
        <div v-if="availableFields.length === 0" class="text-center py-4 text-muted-foreground text-sm">
          All fields have been added to the layout.
        </div>
        
        <div v-else class="space-y-2">
          <div
            v-for="field in availableFields"
            :key="field.id"
            class="p-3 border rounded cursor-pointer bg-white dark:bg-slate-900 hover:border-primary hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
            draggable="true"
            @dragstart="handleAvailableFieldDragStart($event, field)"
            @click="addField(field)"
          >
            <div class="font-medium text-sm">{{ field.label }}</div>
            <div class="text-xs text-muted-foreground">
              {{ field.apiName }} • {{ formatFieldType(field.type) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { GripVertical, X } from 'lucide-vue-next'
import type { FieldLayoutItem } from '~/types/page-layout'
import type { FieldConfig } from '~/types/field-types'
import { Button } from '@/components/ui/button'

const props = defineProps<{
  fields: FieldConfig[]
  initialLayout?: FieldLayoutItem[]
  layoutName?: string
}>()

const emit = defineEmits<{
  save: [layout: { fields: FieldLayoutItem[] }]
}>()

// Selected fields in order
const selectedFieldIds = ref<string[]>([])
const draggedIndex = ref<number | null>(null)
const draggedAvailableField = ref<FieldConfig | null>(null)

// Initialize with initial layout
watch(() => props.initialLayout, (layout) => {
  if (layout && layout.length > 0) {
    // Sort by order if available, otherwise use array order
    const sorted = [...layout].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
    selectedFieldIds.value = sorted.map(item => item.fieldId)
  }
}, { immediate: true })

// Computed selected fields in order
const selectedFields = computed(() => {
  return selectedFieldIds.value
    .map(id => props.fields.find(f => f.id === id))
    .filter((f): f is FieldConfig => f !== undefined)
})

// Available fields (not selected)
const availableFields = computed(() => {
  const selectedSet = new Set(selectedFieldIds.value)
  return props.fields.filter(field => !selectedSet.has(field.id))
})

const formatFieldType = (type: string): string => {
  const typeNames: Record<string, string> = {
    'TEXT': 'Text',
    'LONG_TEXT': 'Textarea',
    'EMAIL': 'Email',
    'PHONE': 'Phone',
    'NUMBER': 'Number',
    'CURRENCY': 'Currency',
    'PERCENT': 'Percent',
    'PICKLIST': 'Picklist',
    'MULTI_PICKLIST': 'Multi-select',
    'BOOLEAN': 'Checkbox',
    'DATE': 'Date',
    'DATE_TIME': 'DateTime',
    'TIME': 'Time',
    'URL': 'URL',
    'LOOKUP': 'Lookup',
    'FILE': 'File',
    'IMAGE': 'Image',
    'JSON': 'JSON',
    'text': 'Text',
    'textarea': 'Textarea',
    'email': 'Email',
    'number': 'Number',
    'currency': 'Currency',
    'select': 'Picklist',
    'multiSelect': 'Multi-select',
    'boolean': 'Checkbox',
    'date': 'Date',
    'datetime': 'DateTime',
    'url': 'URL',
    'lookup': 'Lookup',
    'belongsTo': 'Lookup',
  }
  return typeNames[type] || type
}

const addField = (field: FieldConfig) => {
  if (!selectedFieldIds.value.includes(field.id)) {
    selectedFieldIds.value.push(field.id)
  }
}

const removeField = (fieldId: string) => {
  selectedFieldIds.value = selectedFieldIds.value.filter(id => id !== fieldId)
}

// Drag and drop for reordering
const handleDragStart = (event: DragEvent, index: number) => {
  draggedIndex.value = index
  draggedAvailableField.value = null
  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = 'move'
  }
}

const handleDragOver = (event: DragEvent, index: number) => {
  event.preventDefault()
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'move'
  }
}

const handleDrop = (event: DragEvent, targetIndex: number) => {
  event.preventDefault()
  
  // Handle drop from available fields
  if (draggedAvailableField.value) {
    addField(draggedAvailableField.value)
    // Move the newly added field to the target position
    const newFieldId = draggedAvailableField.value.id
    const currentIndex = selectedFieldIds.value.indexOf(newFieldId)
    if (currentIndex !== -1 && currentIndex !== targetIndex) {
      const ids = [...selectedFieldIds.value]
      ids.splice(currentIndex, 1)
      ids.splice(targetIndex, 0, newFieldId)
      selectedFieldIds.value = ids
    }
    draggedAvailableField.value = null
    return
  }
  
  // Handle reordering within selected fields
  if (draggedIndex.value === null || draggedIndex.value === targetIndex) {
    draggedIndex.value = null
    return
  }
  
  const ids = [...selectedFieldIds.value]
  const [removed] = ids.splice(draggedIndex.value, 1)
  ids.splice(targetIndex, 0, removed)
  selectedFieldIds.value = ids
  draggedIndex.value = null
}

// Drag from available fields
const handleAvailableFieldDragStart = (event: DragEvent, field: FieldConfig) => {
  draggedAvailableField.value = field
  draggedIndex.value = null
  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = 'copy'
  }
}

const handleClear = () => {
  if (confirm('Are you sure you want to clear all fields from the layout?')) {
    selectedFieldIds.value = []
  }
}

const handleSave = () => {
  const layout: FieldLayoutItem[] = selectedFieldIds.value.map((fieldId, index) => ({
    fieldId,
    order: index,
  }))
  
  emit('save', { fields: layout })
}
</script>

<style scoped>
.list-view-layout-editor {
  height: calc(100vh - 300px);
  min-height: 500px;
}
</style>
