<script setup lang="ts">
import { ref } from 'vue'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from '~/components/pub/ui/dialog'
import { Button } from '~/components/pub/ui/button'
import { Input } from '~/components/pub/ui/input'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'

const props = defineProps<{
  open: boolean
  letters: Array<{
    noSurat: string
    tglRencana: string
    noSep: string
    namaPasien: string
    noBpjs: string
    klinik: string
    dokter: string
  }>
  selected: string
}>()

const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'update:selected', value: string): void
  (e: 'save'): void
}>()

const search = ref('')

const filteredLetters = computed(() => {
  const letters = props.letters || []
  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
})

function saveSelection() {
  emit('save')
  emit('update:open', false)
}
</script>

<template>
  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
    <DialogTrigger as-child></DialogTrigger>
    <DialogContent class="max-w-[50%]">
      <DialogHeader>
        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
      </DialogHeader>

      <!-- Input Search -->
      <div class="mb-2 max-w-[50%]">
        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
      </div>

      <!-- Table -->
      <div class="overflow-x-auto rounded-lg border">
        <table class="w-full text-sm">
          <thead class="bg-gray-100">
            <tr class="text-left">
              <th class="p-2"></th>
              <th class="p-2">NO. SURAT KONTROL</th>
              <th class="p-2">TGL RENCANA KONTROL</th>
              <th class="p-2">NO. SEP</th>
              <th class="p-2">NAMA PASIEN</th>
              <th class="p-2">NO. KARTU BPJS</th>
              <th class="p-2">KLINIK</th>
              <th class="p-2">DOKTER</th>
            </tr>
          </thead>
          <tbody class="font-normal">
            <tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
              <td class="p-2">
                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
                </RadioGroup>
              </td>
              <td class="p-2">{{ p.noSurat }}</td>
              <td class="p-2">{{ p.tglRencana }}</td>
              <td class="p-2">{{ p.noSep }}</td>
              <td class="p-2">{{ p.namaPasien }}</td>
              <td class="p-2">{{ p.noBpjs }}</td>
              <td class="p-2">{{ p.klinik }}</td>
              <td class="p-2">{{ p.dokter }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Footer -->
      <DialogFooter>
        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
          <Icon name="i-lucide-save" class="h-5 w-5" />
          Simpan
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
