<script setup lang="ts">
import type { SpecSection } from '@/api/types'
import SectionCard from './SectionCard.vue'
import { VueDraggable } from 'vue-draggable-plus'

const props = defineProps<{
  modelValue: SpecSection[]
  owner?: string
  repo?: string
}>()
const emit = defineEmits<{ 'update:modelValue': [value: SpecSection[]] }>()

function renumber(sections: SpecSection[]): SpecSection[] {
  return sections.map((s, i) => ({ ...s, section_number: String(i + 1) }))
}

function updateSection(index: number, section: SpecSection) {
  const updated = [...props.modelValue]
  updated[index] = section
  emit('update:modelValue', updated)
}

function removeSection(index: number) {
  const updated = props.modelValue.filter((_, i) => i !== index)
  emit('update:modelValue', renumber(updated))
}

function addSection() {
  const newSection: SpecSection = {
    id: `section-${Date.now()}`,
    section_number: String(props.modelValue.length + 1),
    title: '',
    depth: 2,
    content: '',
    prose_content: '',
    status: { state: 'draft' },
    acceptance_criteria: [],
    children: [],
  }
  emit('update:modelValue', [...props.modelValue, newSection])
}

function duplicateSection(index: number) {
  const original = props.modelValue[index]
  const clone: SpecSection = {
    ...JSON.parse(JSON.stringify(original)),
    id: `section-${Date.now()}`,
    status: { state: 'draft' },
    title: original.title ? `${original.title} (copy)` : '',
  }
  const updated = [...props.modelValue]
  updated.splice(index + 1, 0, clone)
  emit('update:modelValue', renumber(updated))
}

function onDragUpdate(sections: SpecSection[]) {
  emit('update:modelValue', renumber(sections))
}
</script>

<template>
  <div>
    <template v-if="modelValue.length > 0">
      <VueDraggable
        :model-value="modelValue"
        handle=".drag-handle"
        :animation="250"
        ghost-class="section-ghost"
        class="space-y-2"
        @update:model-value="onDragUpdate"
      >
        <SectionCard
          v-for="(section, i) in modelValue"
          :key="section.id"
          :model-value="section"
          :index="i"
          :owner="props.owner"
          :repo="props.repo"
          @update:model-value="updateSection(i, $event)"
          @remove="removeSection(i)"
          @duplicate="duplicateSection(i)"
        />
      </VueDraggable>
    </template>

    <!-- Empty state -->
    <div v-else class="flex flex-col items-center justify-center py-16 text-center">
      <svg class="w-12 h-12 text-slate-200 dark:text-slate-700 mb-4" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
      </svg>
      <p class="text-sm font-medium text-slate-500 dark:text-slate-400">No sections yet</p>
      <p class="text-xs text-slate-400 dark:text-slate-500 mt-1">Add your first section to start building the spec</p>
    </div>

    <!-- Add Section button -->
    <div class="mt-4 flex justify-center">
      <button
        class="flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm transition-all border-2 border-dashed"
        :class="modelValue.length === 0
          ? 'border-accent-400 text-accent-600 dark:text-accent-400 hover:bg-accent-50 dark:hover:bg-accent-900/10 font-medium'
          : 'border-border-light dark:border-slate-700 text-slate-400 hover:border-accent-400 hover:text-accent-500 dark:hover:border-accent-600 dark:hover:text-accent-400'"
        @click="addSection"
      >
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
        Add Section
      </button>
    </div>
  </div>
</template>
