<template>
  <div v-if="modelValue.length" class="overflow-x-auto">
    <table class="table table-sm">
      <thead>
        <tr>
          <th>Fournisseur</th>
          <th>Réf. fournisseur</th>
          <th v-if="!readonly" class="w-10" />
        </tr>
      </thead>
      <tbody>
        <tr v-for="(link, index) in modelValue" :key="link.constructeurId">
          <td class="font-medium">
            {{ getConstructeurName(link) }}
            <div v-if="getConstructeurContact(link)" class="text-xs text-gray-500">
              {{ getConstructeurContact(link) }}
            </div>
          </td>
          <td>
            <input
              v-if="!readonly"
              :value="link.supplierReference || ''"
              type="text"
              class="input input-bordered input-sm w-full"
              placeholder="Réf. fournisseur"
              @input="updateReference(index, ($event.target as HTMLInputElement).value)"
            >
            <span v-else>{{ link.supplierReference || '—' }}</span>
          </td>
          <td v-if="!readonly">
            <button
              type="button"
              class="btn btn-ghost btn-xs text-error"
              aria-label="Retirer"
              @click="removeLink(index)"
            >
              <IconLucideX class="w-4 h-4" />
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
import { formatConstructeurContact } from '~/shared/constructeurUtils'
import { useConstructeurs } from '~/composables/useConstructeurs'
import IconLucideX from '~icons/lucide/x'

const props = defineProps({
  modelValue: {
    type: Array as PropType<ConstructeurLinkEntry[]>,
    default: () => [],
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: ConstructeurLinkEntry[]): void
  (e: 'remove', constructeurId: string): void
}>()

const { getConstructeurById } = useConstructeurs()

const getConstructeurName = (link: ConstructeurLinkEntry): string =>
  link.constructeur?.name || getConstructeurById(link.constructeurId)?.name || link.constructeurId

const getConstructeurContact = (link: ConstructeurLinkEntry): string => {
  const c = link.constructeur || getConstructeurById(link.constructeurId)
  return formatConstructeurContact(c as any)
}

const updateReference = (index: number, value: string) => {
  const updated = [...props.modelValue]
  const entry = updated[index]
  if (!entry) return
  updated[index] = { ...entry, supplierReference: value || null }
  emit('update:modelValue', updated)
}

const removeLink = (index: number) => {
  const removed = props.modelValue[index]
  const updated = props.modelValue.filter((_, i) => i !== index)
  emit('update:modelValue', updated)
  if (removed) emit('remove', removed.constructeurId)
}
</script>
