<script setup lang="ts">
// Components
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
import { Button } from '~/components/pub/ui/button'
import { Input } from '~/components/pub/ui/input'
import Select from '~/components/pub/ui/select/Select.vue'
import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
import FileUpload from '~/components/pub/my-ui/form/file-field.vue'

// Types
import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
import type { PatientEntity } from '~/models/patient'
import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'

// Helpers
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import { refDebounced } from '@vueuse/core'

const props = defineProps<{
  isLoading?: boolean
  isReadonly?: boolean
  isSepValid?: boolean
  isCheckingSep?: boolean
  doctor?: any[]
  subSpecialist?: any[]
  specialists?: TreeItem[]
  payments: any[]
  participantGroups?: any[]
  seps: any[]
  patient?: PatientEntity | null | undefined
  objects?: any
}>()

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

// Validation schema
const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
  validationSchema: toTypedSchema(IntegrationEncounterSchema),
})

// Bind fields and extract attrs
const [doctorId, doctorIdAttrs] = defineField('doctorId')
const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
const [registerDate, registerDateAttrs] = defineField('registerDate')
const [paymentType, paymentTypeAttrs] = defineField('paymentType')
const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
const [sepType, sepTypeAttrs] = defineField('sepType')
const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
const [patientName, patientNameAttrs] = defineField('patientName')
const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
const patientId = ref('')

const isLoading = props.isLoading !== undefined ? props.isLoading : false
const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false

// SEP validation state from props
const isSepValid = computed(() => props.isSepValid || false)
const isCheckingSep = computed(() => props.isCheckingSep || false)

const doctorOpts = computed(() => {
  // Add default option
  const defaultOption = [{ label: 'Pilih', value: '' }]
  // Add doctors from props
  const doctors = props.doctor || []
  return [...defaultOption, ...doctors]
})

const isJKNPayment = computed(() => paymentType.value === 'jkn')

async function onFetchChildren(parentId: string): Promise<void> {
  console.log('onFetchChildren', parentId)
}

// Watch specialist/subspecialist selection to fetch doctors
watch(subSpecialistId, async (newValue) => {
  if (newValue) {
    console.log('SubSpecialist changed:', newValue)
    // Reset doctor selection
    doctorId.value = ''
    // Emit fetch event to parent
    emit('fetch', { subSpecialistId: newValue })
  }
})

// Debounced SEP number watcher: emit change only after user stops typing
const debouncedSepNumber = refDebounced(sepNumber, 500)
watch(debouncedSepNumber, (newValue) => {
  emit('event', 'sep-number-changed', newValue)
})

// Sync props to form fields
watch(
  () => props.objects,
  (objects) => {
    if (objects && Object.keys(objects).length > 0) {
      patientName.value = objects?.patientName || ''
      nationalIdentity.value = objects?.nationalIdentity || ''
      medicalRecordNumber.value = objects?.medicalRecordNumber || ''
      doctorId.value = objects?.doctorId || ''
      subSpecialistId.value = objects?.subSpecialistId || ''
      registerDate.value = objects?.registerDate || ''
      paymentType.value = objects?.paymentType || ''
      patientCategory.value = objects?.patientCategory || ''
      cardNumber.value = objects?.cardNumber || ''
      sepType.value = objects?.sepType || ''
      sepNumber.value = objects?.sepNumber || ''
    }
  },
  { deep: true, immediate: true },
)

watch(
  () => props.patient,
  (patient) => {
    if (patient && Object.keys(patient).length > 0) {
      patientId.value = patient?.id ? String(patient.id) : ''
      patientName.value = patient?.person?.name || ''
      nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
      medicalRecordNumber.value = patient?.number || ''
    }
  },
  { deep: true, immediate: true },
)

function onAddSep() {
  const formValues = {
    patientId: patientId.value || '',
    doctorCode: doctorId.value,
    subSpecialistCode: subSpecialistId.value,
    registerDate: registerDate.value,
    cardNumber: cardNumber.value,
    paymentType: paymentType.value,
    sepType: sepType.value
  }
  emit('event', 'add-sep', formValues)
}

// Submit handler
const onSubmit = handleSubmit((values) => {
  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
  emit('event', 'save', values)
})

// Expose submit method for parent component
const formRef = ref<HTMLFormElement | null>(null)

function submitForm() {
  console.log('🔵 submitForm called, formRef:', formRef.value)
  console.log('🔵 Form values:', {
    doctorId: doctorId.value,
    subSpecialistId: subSpecialistId.value,
    registerDate: registerDate.value,
    paymentType: paymentType.value,
  })
  console.log('🔵 Form errors:', errors.value)
  console.log('🔵 Form meta:', meta.value)
  
  // Trigger form submit using native form submit
  // This will trigger validation and onSubmit handler
  if (formRef.value) {
    console.log('🔵 Calling formRef.value.requestSubmit()')
    formRef.value.requestSubmit()
  } else {
    console.warn('⚠️ formRef.value is null, cannot submit form')
    // Fallback: directly call onSubmit handler
    // Create a mock event object
    const mockEvent = {
      preventDefault: () => {},
      target: formRef.value || {},
    } as SubmitEvent
    
    // Call onSubmit directly
    console.log('🔵 Calling onSubmit with mock event')
    onSubmit(mockEvent)
  }
}

defineExpose({
  submitForm,
})
</script>

<template>
  <div class="mx-auto w-full">
    <form
      ref="formRef"
      @submit.prevent="onSubmit"
      class="grid gap-6 p-4"
    >
      <!-- Data Pasien -->
      <div class="flex flex-col gap-2">
        <h3 class="text-lg font-semibold">Data Pasien</h3>
        <div class="flex items-center gap-2">
          <span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
          <Button
            variant="outline"
            type="button"
            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
            @click="emit('event', 'search')"
          >
            <Icon
              name="i-lucide-search"
              class="h-5 w-5"
            />
            Cari Pasien
          </Button>
          <span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
          <Button
            variant="outline"
            type="button"
            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
            @click="emit('event', 'add')"
          >
            <Icon
              name="i-lucide-plus"
              class="h-5 w-5"
            />
            Tambah Pasien Baru
          </Button>
        </div>
      </div>

      <Block
        labelSize="thin"
        class="!pt-0"
        :colCount="3"
        :cellFlex="false"
      >
        <Cell>
          <Label height="compact">Nama Pasien</Label>
          <Field :errMessage="errors.patientName">
            <Input
              id="patientName"
              v-model="patientName"
              v-bind="patientNameAttrs"
              :disabled="true"
            />
          </Field>
        </Cell>

        <Cell>
          <Label height="compact">NIK</Label>
          <Field :errMessage="errors.nationalIdentity">
            <Input
              id="nationalIdentity"
              v-model="nationalIdentity"
              v-bind="nationalIdentityAttrs"
              :disabled="true"
            />
          </Field>
        </Cell>

        <Cell>
          <Label height="compact">No. RM</Label>
          <Field :errMessage="errors.medicalRecordNumber">
            <Input
              id="medicalRecordNumber"
              v-model="medicalRecordNumber"
              v-bind="medicalRecordNumberAttrs"
              :disabled="true"
            />
          </Field>
        </Cell>
      </Block>

      <hr />

      <!-- Data Kunjungan -->
      <h3 class="text-lg font-semibold">Data Kunjungan</h3>

      <Block
        labelSize="thin"
        class="!pt-0"
        :colCount="3"
        :cellFlex="false"
      >
        <Cell>
          <Label height="compact">
            Dokter
            <span class="text-red-500">*</span>
          </Label>
          <Field :errMessage="errors.doctorId">
            <Combobox
              id="doctorId"
              v-model="doctorId"
              v-bind="doctorIdAttrs"
              :items="doctorOpts"
              :is-disabled="isLoading || isReadonly"
              placeholder="Pilih Dokter"
              search-placeholder="Cari Dokter"
              empty-message="Dokter tidak ditemukan"
            />
          </Field>
        </Cell>

        <Cell>
          <Label height="compact">
            Spesialis / Subspesialis
            <span class="text-red-500">*</span>
          </Label>
          <Field :errMessage="errors.subSpecialistId">
            <TreeSelect
              id="subSpecialistId"
              v-model="subSpecialistId"
              v-bind="subSpecialistIdAttrs"
              :data="specialists || []"
              :on-fetch-children="onFetchChildren"
            />
          </Field>
        </Cell>
      </Block>

      <Block
        labelSize="thin"
        class="!pt-0"
        :colCount="3"
        :cellFlex="false"
      >
        <Cell>
          <Label height="compact">
            Tanggal Daftar
            <span class="text-red-500">*</span>
          </Label>
          <Field :errMessage="errors.registerDate">
            <DatepickerSingle
              id="registerDate"
              v-model="registerDate"
              v-bind="registerDateAttrs"
              placeholder="Pilih tanggal"
            />
          </Field>
        </Cell>

        <Cell>
          <Label height="compact">
            Jenis Pembayaran
            <span class="text-red-500">*</span>
          </Label>
          <Field :errMessage="errors.paymentType">
            <Select
              id="paymentType"
              v-model="paymentType"
              v-bind="paymentTypeAttrs"
              :items="payments"
              :disabled="isLoading || isReadonly"
              placeholder="Pilih Jenis Pembayaran"
            />
          </Field>
        </Cell>
      </Block>

      <!-- BPJS Fields (conditional) -->
      <template v-if="isJKNPayment">
        <Block
          labelSize="thin"
          class="!pt-0"
          :colCount="3"
          :cellFlex="false"
        >
          <Cell>
            <Label height="compact">
              Kelompok Peserta
              <span class="text-red-500">*</span>
            </Label>
            <Field :errMessage="errors.patientCategory">
              <Select
                id="patientCategory"
                v-model="patientCategory"
                v-bind="patientCategoryAttrs"
                :items="participantGroups || []"
                :disabled="isLoading || isReadonly"
                placeholder="Pilih Kelompok Peserta"
              />
            </Field>
          </Cell>

          <Cell>
            <Label height="compact">
              No. Kartu BPJS
              <span class="text-red-500">*</span>
            </Label>
            <Field :errMessage="errors.cardNumber">
              <Input
                id="cardNumber"
                v-model="cardNumber"
                v-bind="cardNumberAttrs"
                :disabled="isLoading || isReadonly"
                placeholder="Masukkan nomor kartu BPJS"
              />
            </Field>
          </Cell>

          <Cell>
            <Label height="compact">
              Jenis SEP
              <span class="text-red-500">*</span>
            </Label>
            <Field :errMessage="errors.sepType">
              <Select
                id="sepType"
                v-model="sepType"
                v-bind="sepTypeAttrs"
                :items="seps"
                :disabled="isLoading || isReadonly"
                placeholder="Pilih Jenis SEP"
              />
            </Field>
          </Cell>
        </Block>

        <Block
          labelSize="thin"
          class="!pt-0"
          :colCount="3"
          :cellFlex="false"
        >
          <Cell>
            <Label height="compact">
              No. SEP
              <span class="text-red-500">*</span>
            </Label>
            <Field :errMessage="errors.sepNumber">
              <div class="flex gap-2">
                <Input
                  id="sepNumber"
                  v-model="sepNumber"
                  v-bind="sepNumberAttrs"
                  placeholder="Tambah SEP terlebih dahulu"
                  class="flex-1"
                  :disabled="isLoading || isReadonly"
                />
                <Button
                  v-if="!isSepValid"
                  variant="outline"
                  type="button"
                  class="bg-primary"
                  size="sm"
                  :disabled="isCheckingSep || isLoading || isReadonly"
                  @click="onAddSep"
                >
                  <Icon
                    v-if="isCheckingSep"
                    name="i-lucide-loader-2"
                    class="h-4 w-4 animate-spin"
                  />
                  <span v-else>+</span>
                </Button>
                <Button
                  v-else
                  variant="outline"
                  type="button"
                  class="bg-green-500 text-white hover:bg-green-600"
                  size="sm"
                  disabled
                >
                  <Icon
                    name="i-lucide-check"
                    class="h-4 w-4"
                  />
                </Button>
              </div>
            </Field>
          </Cell>

          <FileUpload
            field-name="sepFile"
            label="Dokumen SEP"
            placeholder="Unggah dokumen SEP"
            :accept="['pdf', 'jpg', 'png']"
            :max-size-mb="1"
          />

          <FileUpload
            field-name="sippFile"
            label="Dokumen SIPP"
            placeholder="Unggah dokumen SIPP"
            :accept="['pdf', 'jpg', 'png']"
            :max-size-mb="1"
          />
        </Block>
      </template>
    </form>
  </div>
</template>
