<script setup lang="ts">
// Types
import { type ProcedureSrc } from '~/models/procedure-src'

// Helper
import { cn } from '~/lib/utils'

// Components
import { FieldArray } from 'vee-validate'
import { ButtonAction } from '~/components/pub/my-ui/form'
import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
import ProcedureListDialog from './procedure-list.vue'

interface Props {
  fieldName: string
  title: string
  subTitle?: string

  // State UI (Loading / Disabled)
  isReadonly?: boolean

  // Data Architecture Switch
  // 'form' = Pakai Vee-Validate (Parent wajib useForm)
  // 'preview' = Pakai Props sampleItems (Parent bebas)
  mode?: 'form' | 'preview'

  // Data Source untuk mode 'preview' (atau initial data)
  sampleItems?: ProcedureSrc[]
}

// Set default mode ke 'form' agar backward compatible
const props = withDefaults(defineProps<Props>(), {
  mode: 'form',
  isReadonly: false,
  sampleItems: () => [],
})

const isProcedurePickerDialogOpen = ref<boolean>(false)
provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
</script>

<template>
  <div class="mb-2 flex items-center justify-between">
    <p class="mb-2 font-medium">{{ title }}</p>

    <ButtonAction
      v-if="mode === 'form' && !isReadonly"
      preset="add"
      title="Tambah Item"
      icon="i-lucide-search"
      :label="subTitle || 'Pilih Diagnosis'"
      :full-width-mobile="true"
      @click="isProcedurePickerDialogOpen = true"
    />
  </div>

  <FieldArray
    v-if="mode === 'form'"
    v-slot="{ fields, push, remove }"
    :name="props.fieldName"
  >
    <ProcedureListDialog :process-fn="push" />

    <div class="overflow-hidden rounded-lg border border-gray-200">
      <Table>
        <TableHeader class="bg-gray-100">
          <TableRow>
            <TableHead class="w-1/2">Prosedur</TableHead>
            <TableHead class="w-1/2">ICD-X</TableHead>
            <TableHead class="w-[50px]">Action</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-if="fields.length === 0">
            <TableCell
              colspan="3"
              class="py-4 text-center text-muted-foreground"
            >
              Belum ada data dipilih.
            </TableCell>
          </TableRow>

          <TableRow
            v-for="(field, idx) in fields"
            :key="field.key"
          >
            <TableCell :class="cn(isReadonly && 'opacity-50')">
              {{ (field.value as ProcedureSrc)?.name }}
            </TableCell>
            <TableCell :class="cn(isReadonly && 'opacity-50')">
              {{ (field.value as ProcedureSrc)?.code }}
            </TableCell>
            <TableCell>
              <ButtonAction
                v-if="!isReadonly"
                preset="delete"
                icon-only
                :title="`Hapus ${(field.value as ProcedureSrc)?.name}`"
                @click="remove(idx)"
              />
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  </FieldArray>

  <div
    v-else
    class="overflow-hidden rounded-lg border border-gray-200"
  >
    <Table>
      <TableHeader class="bg-gray-100">
        <TableRow>
          <TableHead class="w-1/2">Prosedur</TableHead>
          <TableHead class="w-1/2">ICD-X</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-if="sampleItems.length === 0">
          <TableCell
            colspan="2"
            class="py-4 text-center text-muted-foreground"
          >
            Tidak ada data.
          </TableCell>
        </TableRow>

        <TableRow
          v-for="item in sampleItems"
          :key="item.code || item.id"
        >
          <TableCell class="text-muted-foreground">
            {{ item.name }}
          </TableCell>
          <TableCell class="text-muted-foreground">
            {{ item.code }}
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>
