<script setup lang="ts">
// helpers
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import * as z from 'zod'
// components
import { Button } from '~/components/pub/ui/button'
import { Input } from '~/components/pub/ui/input'
import { Label } from '~/components/pub/ui/label'
import { Select } from '~/components/pub/ui/select'
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
import { Textarea } from '~/components/pub/ui/textarea'
import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'

const emit = defineEmits<{
  (e: 'event', value: any): void
}>()

const items = [
  { value: 'item-1', label: 'Item 1' },
  { value: 'item-2', label: 'Item 2' },
  { value: 'item-3', label: 'Item 3' },
]

// Validation schema
const schema = z.object({
  tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
  jalur: z.string().min(1, 'Pilih jalur'),
  noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
  noKtp: z.string().min(1, 'No. KTP wajib diisi'),
  noRm: z.string().min(1, 'No. RM wajib diisi'),
  namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
  noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
  noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
  tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
  klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
  dpjp: z.string().min(1, 'DPJP wajib diisi'),
  diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
  cob: z.string().min(1, 'COB wajib diisi'),
  katarak: z.string().min(1, 'Katarak wajib diisi'),
  jenisProsedur: z.string().min(1, 'Jenis prosedur wajib diisi'),
  kodePenunjang: z.string().min(1, 'Kode penunjang wajib diisi'),
})

const { handleSubmit, errors, defineField } = useForm({
  validationSchema: toTypedSchema(schema),
})

// Bind fields
const [tanggalSep] = defineField('tanggalSep')
const [jalur] = defineField('jalur')
const [noBpjs] = defineField('noBpjs')
const [noKtp] = defineField('noKtp')
const [noRm] = defineField('noRm')
const [namaPasien] = defineField('namaPasien')
const [noTelp] = defineField('noTelp')
const [noSuratKontrol] = defineField('noSuratKontrol')
const [tglSuratKontrol] = defineField('tglSuratKontrol')
const [klinikTujuan] = defineField('klinikTujuan')
const [dpjp] = defineField('dpjp')
const [diagnosaAwal] = defineField('diagnosaAwal')
const [cob] = defineField('cob')
const [katarak] = defineField('katarak')
const [jenisProsedur] = defineField('jenisProsedur')
const [kodePenunjang] = defineField('kodePenunjang')

// Submit handler
const onSubmit = handleSubmit((values) => {
  console.log('✅ Validated form values:', values)
})
</script>

<template>
  <div class="mx-auto w-full">
    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
      <!-- Tanggal SEP & Jalur -->
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="flex flex-col gap-2">
          <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
          <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
          <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label for="jalur">Jalur</Label>
          <Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
          <p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
        </div>
      </div>

      <hr />

      <!-- Data Pasien -->
      <div class="flex items-center gap-2">
        <h3 class="text-lg font-semibold">Data Pasien</h3>
        <Button
          variant="outline"
          class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
          @click="emit('event', 'search-patient')"
        >
          <Icon name="i-lucide-search" class="h-5 w-5" />
          Cari Pasien
        </Button>
      </div>
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="flex flex-col gap-2">
          <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
          <Input v-model="noBpjs" />
          <p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label>No. KTP<span class="text-red-500">*</span></Label>
          <Input v-model="noKtp" />
          <p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label>No. RM<span class="text-red-500">*</span></Label>
          <Input v-model="noRm" />
          <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label>Nama Pasien<span class="text-red-500">*</span></Label>
          <Input v-model="namaPasien" />
          <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label>No. Telepon<span class="text-red-500">*</span></Label>
          <Input v-model="noTelp" />
          <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
        </div>
      </div>

      <hr />

      <!-- Data SEP -->
      <h3 class="text-lg font-semibold">Data SEP</h3>
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="flex flex-col gap-2">
          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
          <div class="flex gap-2">
            <Input class="flex-1" v-model="noSuratKontrol" />
            <Button
              variant="outline"
              class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
              @click="emit('event', 'search-letter')"
            >
              <Icon name="i-lucide-search" class="h-5 w-5" />
              Cari Data
            </Button>
          </div>
          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
          <DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
          <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
        </div>
        <div class="flex flex-row items-center gap-2">
          <div class="flex-1">
            <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
            <Select
              icon-name="i-lucide-chevron-down"
              v-model="klinikTujuan"
              :items="items"
              placeholder="Pilih klinik"
            ></Select>
            <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
          </div>
          <div>
            <Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
            <RadioGroup v-model="cob" class="flex items-center gap-2">
              <div class="flex items-center space-x-2">
                <RadioGroupItem value="Ya" id="cob-ya" />
                <Label for="cob-ya">Ya</Label>
              </div>
              <div class="flex items-center space-x-2">
                <RadioGroupItem value="Tidak" id="cob-tidak" />
                <Label for="cob-tidak">Tidak</Label>
              </div>
            </RadioGroup>
          </div>
        </div>
        <div class="flex flex-col gap-2">
          <Label>DPJP<span class="text-red-500">*</span></Label>
          <Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
          <p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
        </div>
        <div class="flex flex-col gap-2">
          <Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
          <Input v-model="diagnosaAwal" />
          <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
        </div>
      </div>

      <!-- Catatan -->
      <div>
        <Label>Catatan</Label>
        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
      </div>

      <div class="flex items-center gap-4">
        <div>
          <Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
          <RadioGroup v-model="cob" class="flex items-center gap-2">
            <div class="flex items-center space-x-2">
              <RadioGroupItem value="Ya" id="cob-ya" />
              <Label for="cob-ya">Ya</Label>
            </div>
            <div class="flex items-center space-x-2">
              <RadioGroupItem value="Tidak" id="cob-tidak" />
              <Label for="cob-tidak">Tidak</Label>
            </div>
          </RadioGroup>
        </div>
        <div>
          <Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
          <RadioGroup v-model="katarak" class="flex items-center gap-2">
            <div class="flex items-center space-x-2">
              <RadioGroupItem value="Ya" id="katarak-ya" />
              <Label for="katarak-ya">Ya</Label>
            </div>
            <div class="flex items-center space-x-2">
              <RadioGroupItem value="Tidak" id="katarak-tidak" />
              <Label for="katarak-tidak">Tidak</Label>
            </div>
          </RadioGroup>
        </div>
      </div>

      <div class="grid gap-4 md:grid-cols-3">
        <div class="flex flex-col gap-2">
          <Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
          <RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
            <div class="flex items-center space-x-2">
              <RadioGroupItem value="procedure-one" id="procedure-one" />
              <Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
            </div>
            <div class="flex items-center space-x-2">
              <RadioGroupItem value="procedure-two" id="procedure-two" />
              <Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
            </div>
          </RadioGroup>
        </div>
      </div>

      <div class="grid gap-4 md:grid-cols-3">
        <div class="flex flex-col gap-2">
          <Label>Kode Penunjang<span class="text-red-500">*</span></Label>
          <Select
            icon-name="i-lucide-chevron-down"
            v-model="kodePenunjang"
            :items="items"
            placeholder="Pilih Kode Penunjang"
          ></Select>
          <p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
        </div>
      </div>

      <!-- Actions -->
      <div class="mt-6 flex justify-end gap-2">
        <Button
          type="button"
          variant="ghost"
          class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
          @click="emit('event', 'history-sep')"
        >
          <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
        </Button>
        <Button
          type="button"
          variant="outline"
          class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
        >
          <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
        </Button>
        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
          <Icon name="i-lucide-save" class="h-5 w-5" />
          Simpan
        </Button>
      </div>
    </form>
  </div>
</template>
