<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
  patients: Array<{
    ktp: string
    rm: string
    bpjs: string
    nama: 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 filteredPatients = computed(() => {
  const patients = props.patients || []
  return patients.filter(
    (p) =>
      p.ktp.includes(search.value) ||
      p.rm.includes(search.value) ||
      p.bpjs.includes(search.value) ||
      p.nama.toLowerCase().includes(search.value.toLowerCase()),
  )
})

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-3xl">
      <DialogHeader>
        <DialogTitle>Cari Pasien</DialogTitle>
      </DialogHeader>

      <!-- Input Search -->
      <div class="mb-2 max-w-[50%]">
        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
      </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. KTP</th>
              <th class="p-2">NO. RM</th>
              <th class="p-2">NO. KARTU BPJS</th>
              <th class="p-2">NAMA PASIEN</th>
            </tr>
          </thead>
          <tbody class="font-normal">
            <tr v-for="p in filteredPatients" :key="p.ktp" 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.ktp" :value="p.ktp" />
                </RadioGroup>
              </td>
              <td class="p-2">{{ p.ktp }}</td>
              <td class="p-2">{{ p.rm }}</td>
              <td class="p-2">{{ p.bpjs }}</td>
              <td class="p-2">{{ p.nama }}</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>
