<script setup lang="ts">
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
import Input from '~/components/pub/ui/input/Input.vue'
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
import Button from '~/components/pub/ui/button/Button.vue'
import { format, parseISO } from 'date-fns'
import { id as localeID } from 'date-fns/locale'

interface Props {
  open?: boolean
  tanggalPemeriksaan?: string | Date
  jadwalTanggalPemeriksaan?: string | Date
  isLoading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  tanggalPemeriksaan: undefined,
  jadwalTanggalPemeriksaan: undefined,
  isLoading: false,
})

const emit = defineEmits<{
  'update:open': [value: boolean]
  'update:date': [value: string | undefined]
  'update:schedule': [value: string | undefined]
  submit: [data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }]
}>()

// Local state for jadwal tanggal pemeriksaan
const jadwalTanggal = ref<string | undefined>(
  props.jadwalTanggalPemeriksaan
    ? typeof props.jadwalTanggalPemeriksaan === 'string'
      ? props.jadwalTanggalPemeriksaan
      : format(props.jadwalTanggalPemeriksaan, 'yyyy-MM-dd')
    : undefined,
)

// Watch for external changes
watch(
  () => props.jadwalTanggalPemeriksaan,
  (newValue) => {
    if (newValue) {
      jadwalTanggal.value =
        typeof newValue === 'string' ? newValue : format(newValue, 'yyyy-MM-dd')
    } else {
      jadwalTanggal.value = undefined
    }
  },
)

// Watch local changes
watch(jadwalTanggal, (newValue) => {
  emit('update:schedule', newValue)
})

// Format date for display
const formattedTanggalPemeriksaan = computed(() => {
  if (!props.tanggalPemeriksaan) return ''
  try {
    const date =
      props.tanggalPemeriksaan instanceof Date
        ? props.tanggalPemeriksaan
        : parseISO(props.tanggalPemeriksaan)
    return format(date, 'dd MMMM yyyy', { locale: localeID })
  } catch {
    return props.tanggalPemeriksaan.toString()
  }
})

// Handle submit
function handleSubmit() {
  emit('submit', {
    tanggalPemeriksaan: props.tanggalPemeriksaan
      ? typeof props.tanggalPemeriksaan === 'string'
        ? props.tanggalPemeriksaan
        : format(props.tanggalPemeriksaan, 'yyyy-MM-dd')
      : undefined,
    jadwalTanggalPemeriksaan: jadwalTanggal.value,
  })
}

// Table data for Jadwal Ruang Tindakan
const scheduleData = [
  {
    no: 1,
    namaJenis: 'Ruang Tindakan',
    jenisPemeriksaan: 'KEMOTERAPI',
  },
]
</script>

<template>
  <Dialog
    :open="open"
    size="lg"
    title="Verifikasi Jadwal Pasien"
    @update:open="$emit('update:open', $event)"
  >
    <div class="space-y-6 py-4">
      <!-- Jadwal Ruang Tindakan Section -->
      <div class="space-y-3">
        <h4 class="text-base font-semibold">Jadwal Ruang Tindakan</h4>
        <div class="overflow-hidden rounded-md border">
          <Table>
            <TableHeader class="bg-gray-50">
              <TableRow>
                <TableHead class="font-semibold">NO</TableHead>
                <TableHead class="font-semibold">NAMA JENIS</TableHead>
                <TableHead class="font-semibold">JENIS PEMERIKSAAN</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow v-for="(row, index) in scheduleData" :key="index">
                <TableCell>{{ row.no }}</TableCell>
                <TableCell>{{ row.namaJenis }}</TableCell>
                <TableCell>{{ row.jenisPemeriksaan }}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </div>

      <!-- Tanggal Pemeriksaan Section -->
      <div class="space-y-2">
        <label class="text-sm font-medium">Tanggal Pemeriksaan</label>
        <Input
          :model-value="formattedTanggalPemeriksaan"
          :disabled="true"
          class="bg-gray-100 text-gray-700"
          readonly
        />
      </div>

      <!-- Jadwal Tanggal Pemeriksaan Section -->
      <div class="space-y-2">
        <label class="text-sm font-medium">
          Jadwal Tanggal Pemeriksaan
          <span class="text-red-500">*</span>
        </label>
        <DatepickerSingle
          v-model="jadwalTanggal"
          placeholder="Pilih Jadwal"
          :disabled="isLoading"
        />
      </div>

      <!-- Action Button -->
      <div class="flex justify-end pt-4">
        <Button
          type="button"
          :disabled="isLoading || !jadwalTanggal"
          class="bg-gradient-to-r from-orange-500 to-orange-400 hover:from-orange-600 hover:to-orange-500 text-white shadow-md"
          @click="handleSubmit"
        >
          <Icon name="i-lucide-calendar-check" class="mr-2 h-4 w-4" />
          Simpan Jadwal
        </Button>
      </div>
    </div>
  </Dialog>
</template>

