<script setup lang="ts">
import type { AcceptanceCriterion } from '@/api/types'

const props = defineProps<{
  modelValue: AcceptanceCriterion
  index: number
}>()

const emit = defineEmits<{
  'update:modelValue': [value: AcceptanceCriterion]
  remove: []
  'insert-after': []
  'focus-next': []
  'focus-prev': []
}>()

function toggleChecked() {
  emit('update:modelValue', { ...props.modelValue, checked: !props.modelValue.checked })
}

function updateText(text: string) {
  emit('update:modelValue', { ...props.modelValue, text })
}

function handleKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter') {
    e.preventDefault()
    emit('insert-after')
  } else if (e.key === 'Backspace' && props.modelValue.text === '') {
    e.preventDefault()
    emit('remove')
  } else if (e.key === 'ArrowDown') {
    e.preventDefault()
    emit('focus-next')
  } else if (e.key === 'ArrowUp') {
    e.preventDefault()
    emit('focus-prev')
  }
}
</script>

<template>
  <div class="flex items-start gap-2 group hover:bg-gray-50 dark:hover:bg-surface-alt/50 py-0.5 rounded transition-colors">
    <!-- Drag handle -->
    <span class="ac-drag-handle cursor-grab text-gray-300 dark:text-slate-600 hover:text-gray-500 dark:hover:text-slate-400 mt-1 transition-colors">
      <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
        <circle cx="5" cy="3" r="1.2" />
        <circle cx="11" cy="3" r="1.2" />
        <circle cx="5" cy="8" r="1.2" />
        <circle cx="11" cy="8" r="1.2" />
        <circle cx="5" cy="13" r="1.2" />
        <circle cx="11" cy="13" r="1.2" />
      </svg>
    </span>

    <input
      type="checkbox"
      :checked="modelValue.checked"
      class="mt-1 rounded border-border-light dark:border-slate-600 text-accent-500 focus:ring-accent-500"
      @change="toggleChecked"
    />
    <div class="flex-1 min-w-0">
      <input
        :value="modelValue.text"
        data-ac-input
        class="w-full border-0 border-b border-transparent hover:border-gray-200 dark:hover:border-slate-700 bg-transparent text-sm px-1 py-0.5 focus:outline-none focus:border-accent-500 transition-colors"
        :class="modelValue.checked ? 'line-through text-slate-400' : 'text-slate-700 dark:text-slate-300'"
        placeholder="Describe a testable criterion..."
        @input="updateText(($event.target as HTMLInputElement).value)"
        @keydown="handleKeydown"
      />
      <!-- Realized-in badges -->
      <div v-if="modelValue.realized_in && modelValue.realized_in.length > 0" class="flex flex-wrap gap-1 mt-0.5 px-1">
        <span
          v-for="(ref, ri) in modelValue.realized_in"
          :key="ri"
          class="inline-flex items-center gap-1 px-1.5 py-0 rounded-full text-[10px] font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
          :title="`${ref.file_path}${ref.lines ? ':' + ref.lines : ''}`"
        >
          <svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
          </svg>
          PR #{{ ref.pr_number }}
        </span>
      </div>
    </div>
    <button
      tabindex="-1"
      class="opacity-0 group-hover:opacity-100 focus:opacity-100 text-slate-300 hover:text-red-500 transition-opacity p-0.5"
      @click="emit('remove')"
    >
      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
</template>
