<script setup lang="ts">
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'

// Helpers
import type z from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import { genBase } from '~/models/_base'

const props = defineProps<{
  modelValue: any
  schema: z.ZodSchema<any>
  excludeFields?: string[]
  isReadonly?: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: any): void
  (e: 'submit', val: any): void
}>()

// Setup form
const {
  validate: _validate,
  defineField,
  handleSubmit,
  errors,
  values,
} = useForm({
  validationSchema: toTypedSchema(props.schema),
  initialValues: props.modelValue,
})

watch(values, (val) => emit('update:modelValue', val), { deep: true })

const [primaryComplaint, primaryComplaintAttrs] = defineField('prim-compl')
const [pastDisease, pastDiseaseAttrs] = defineField('past-disease')
const [currentDisease, currentDiseaseAttrs] = defineField('current-disease')
const [gcs, gcsAttrs] = defineField('gcs')
const [respiratoryRate, respiratoryRateAttrs] = defineField('respiratory-rate')
const [respiratoryRateType, respiratoryRateTypeAttrs] = defineField('respiratory-rate-type')
const [pulse, pulseAttrs] = defineField('pulse')
const [pulseType, pulseTypeAttrs] = defineField('pulse-type')
const [rightArmBp, rightArmBpAttrs] = defineField('right-arm-bp')
const [leftArmBp, leftArmBpAttrs] = defineField('left-arm-bp')
const [axillaryTemp, axillaryTempAttrs] = defineField('axillary-temp')
const [rektalTemp, rektalTempAttrs] = defineField('rektal-temp')
const [skin, skinAttrs] = defineField('skin')
const [head, headAttrs] = defineField('head')
const [ear, earAttrs] = defineField('ear')
const [nose, noseAttrs] = defineField('nose')
const [oralCavity, oralCavityAttrs] = defineField('oral-cavity')
const [eye, eyeAttrs] = defineField('eye')
const [otherBodyPart, otherBodyPartAttrs] = defineField('other-body-part')
const [neck, neckAttrs] = defineField('neck')
const [thyroid, thyroidAttrs] = defineField('thyroid')
const [thorax, thoraxAttrs] = defineField('thorax')
const [heart, heartAttrs] = defineField('heart')
const [lung, lungAttrs] = defineField('lung')
const [abdomen, abdomenAttrs] = defineField('abdomen')
const [heart2, heart2Attrs] = defineField('heart2')
const [lien, lienAttrs] = defineField('lien')
const [back, backAttrs] = defineField('back')
const [extremity, extremityAttrs] = defineField('extremity')
const [gender, genderAttrs] = defineField('gender')
const [rectum, rectumAttrs] = defineField('rectum')
const [systemSyaraf, systemSyarafAttrs] = defineField('system-syaraf')
const [nervousSystem, nervousSystemAttrs] = defineField('nervous-system')
const [cardioRespiratory, cardioRespiratoryAttrs] = defineField('cardio-respiratory')
const [imaging, imagingAttrs] = defineField('imaging')
const [laboratory, laboratoryAttrs] = defineField('laboratory')

const validate = async () => {
  const result = await _validate()
  console.log('Component validate() result:', result)

  return {
    valid: true,
    data: result.values,
    errors: result.errors,
  }
}

defineExpose({ validate })

const icdPreview = inject('icdPreview')

const isExcluded = (key: string) => props.excludeFields?.includes(key)
const disorders = ref<string[]>([])
const therapies = ref<string[]>([])
const summary = ref('')

const disorderOptions = [
  'Fungsi Otot',
  'Fungsi Sendi',
  'Fungsi Jalan',
  'Fungsi Syaraf',
  'Fungsi Koordinasi',
  'Jantung',
  'Fungsi Respirasi',
  'Fungsi Menelan',
  'Fungsi Bladder',
  'Fungsi Bowel',
  'Fungsi Luhur',
  'Fungsi Kontrol Postur',
  'Fungsi Eksekusi',
  'Fungsi Ortosa/Protesa',
  'Gangguan Aktivitas Sehari-hari',
  'Lainnya',
]

const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
</script>

<template>
  <form id="entry-form">
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <Block>
        <Cell>
          <Label dynamic>Keluhan Utama</Label>
          <Field :errMessage="errors['prim-compl']">
            <Textarea
              v-model="primaryComplaint"
              v-bind="primaryComplaintAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <Block :colCount="2">
        <Cell>
          <Label dynamic>Riwayat Penyakit Dahulu</Label>
          <Field>
            <Textarea
              v-model="pastDisease"
              v-bind="pastDiseaseAttrs"
            />
          </Field>
        </Cell>

        <Cell>
          <Label dynamic>Riwayat Penyakit Sekarang</Label>
          <Field>
            <Textarea
              v-model="currentDisease"
              v-bind="currentDiseaseAttrs"
            />
          </Field>
        </Cell>
      </Block>
      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
      </div>

      <Block>
        <Cell>
          <Label dynamic>Umum</Label>
          <Field>
            <Input placeholder="" />
          </Field>
        </Cell>
      </Block>

      <div class="my-2">
        <h1 class="font-semibold">Tanda Vital</h1>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block>
          <Cell>
            <Label dynamic>Kesadaran (GCS)</Label>
            <Field>
              <Input
                v-model="gcs"
                v-bind="gcsAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Pernapasan</Label>
            <Field>
              <Input
                v-model="respiratoryRate"
                v-bind="respiratoryRateAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Jenis</Label>
            <Field>
              <Input
                v-model="respiratoryRateType"
                v-bind="respiratoryRateTypeAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Nadi</Label>
            <Field>
              <Input
                v-model="pulse"
                v-bind="pulseAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Jenis</Label>
            <Field>
              <Input
                v-model="pulseType"
                v-bind="pulseTypeAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Tekanan Darah Lengan Kanan</Label>
            <Field>
              <Input
                v-model="rightArmBp"
                v-bind="rightArmBpAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Tekanan Darah Lengan Kiri</Label>
            <Field>
              <Input
                v-model="leftArmBp"
                v-bind="leftArmBpAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Suhu Aksila</Label>
            <Field>
              <Input
                v-model="axillaryTemp"
                v-bind="axillaryTempAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Suhu Rektal</Label>
            <Field>
              <Input
                v-model="rektalTemp"
                v-bind="rektalTempAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2">
        <h1 class="font-semibold">Pemeriksaan Badan</h1>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block>
          <Cell>
            <Label dynamic>Kulit</Label>
            <Field>
              <Input
                v-model="skin"
                v-bind="skinAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Kepala</Label>
            <Field>
              <Input
                v-model="head"
                v-bind="headAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Telinga</Label>
            <Field>
              <Input
                v-model="ear"
                v-bind="earAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Hidung</Label>
            <Field>
              <Input
                v-model="nose"
                v-bind="noseAttrs"
              />
            </Field>
          </Cell>
        </Block>

        <Block :colCount="3">
          <Cell>
            <Label dynamic>Rongga Mulut/Tenggorokan</Label>
            <Field>
              <Input
                v-model="oralCavity"
                v-bind="oralCavityAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Mata</Label>
            <Field>
              <Input
                v-model="eye"
                v-bind="eyeAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Lain-Lain</Label>
            <Field>
              <Input
                v-model="otherBodyPart"
                v-bind="otherBodyPartAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Leher</Label>
            <Field>
              <Input
                v-model="neck"
                v-bind="neckAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Kelenjar Tiroid</Label>
            <Field>
              <Input
                v-model="thyroid"
                v-bind="thyroidAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Lain-Lain</Label>
            <Field>
              <Input />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Thorax</Label>
            <Field>
              <Input
                v-model="thorax"
                v-bind="thoraxAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Jantung</Label>
            <Field>
              <Input
                v-model="heart"
                v-bind="heartAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Paru-Paru</Label>
            <Field>
              <Input
                v-model="lung"
                v-bind="lungAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block>
          <Cell>
            <Label dynamic>Lain-Lain</Label>
            <Field>
              <Input />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Abdomen</Label>
            <Field>
              <Input
                v-model="abdomen"
                v-bind="abdomenAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Hati</Label>
            <Field>
              <Input
                v-model="heart2"
                v-bind="heart2Attrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Lien</Label>
            <Field>
              <Input
                v-model="lien"
                v-bind="lienAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block>
          <Cell>
            <Label dynamic>Lain-Lain</Label>
            <Field>
              <Input />
            </Field>
          </Cell>
        </Block>
      </div>

      <div class="my-2 rounded-md border border-slate-300 p-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Punggung</Label>
            <Field>
              <Input
                v-model="back"
                v-bind="backAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Ekstremitas</Label>
            <Field>
              <Input
                v-model="extremity"
                v-bind="extremityAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Kelamin</Label>
            <Field>
              <Input
                v-model="gender"
                v-bind="genderAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Rectum</Label>
            <Field>
              <Input
                v-model="rectum"
                v-bind="rectumAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>System Syaraf</Label>
            <Field>
              <Input
                v-model="nervousSystem"
                v-bind="nervousSystemAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <Block :colCount="2">
        <Cell>
          <Label dynamic>Neuromoskuloskeletal</Label>
          <Field>
            <Textarea
              v-model="neuromoskuloskeletal"
              v-bind="neuromoskuloskeletalAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Kardiorespirasi</Label>
          <Field>
            <Textarea
              v-model="cardioRespiratory"
              v-bind="cardioRespiratoryAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
      </div>

      <Block :colCount="2">
        <Cell>
          <Label dynamic>Pencitraan</Label>
          <Field>
            <Textarea
              v-model="imaging"
              v-bind="imagingAttrs"
            />
          </Field>
        </Cell>
        <Cell>
          <Label dynamic>Laboratorium</Label>
          <Field>
            <Textarea
              v-model="laboratory"
              v-bind="laboratoryAttrs"
            />
          </Field>
        </Cell>
      </Block>

      <div class="mb-8 grid grid-cols-2 gap-4">
        <div>
          <span class="text-md">Diagnosa Medis (ICD-X)</span>
          <Button
            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
            type="button"
            @click="emit('click', 'diagnosa')"
          >
            + Pilih Prosedur
          </Button>
          <AppIcdPreview v-model="icdPreview.diagnoses" />
        </div>
        <div>
          <span class="text-md">Diagnosa Fungsional (ICD-X)</span>
          <Button
            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
            type="button"
            @click="emit('click', 'fungsional')"
          >
            + Pilih Prosedur
          </Button>
          <AppIcdPreview v-model="icdPreview.fungsional" />
        </div>
        <div>
          <span class="text-md">Diagnosa Medis (ICD-X)</span>
          <Button
            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
            type="button"
            @click="emit('click', 'prosedur')"
          >
            + Pilih Prosedur
          </Button>
          <AppIcdPreview v-model="icdPreview.procedures" />
        </div>
      </div>

      <div class="space-y-8">
        <div>
          <h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
          <div class="grid grid-cols-3 gap-2">
            <div
              v-for="opt in disorderOptions"
              :key="opt"
              class="flex items-center space-x-2"
            >
              <Checkbox
                :id="opt"
                :value="opt"
                v-model="disorders"
              />
              <Label
                :for="opt"
                class="text-sm"
              >
                {{ opt }}
              </Label>
            </div>
          </div>

          <div class="mt-4 space-y-2">
            <Label
              for="summary"
              class="font-medium"
            >
              Kesimpulan Didapatkan Gangguan Fungsi
              <span class="text-red-500">*</span>
            </Label>
            <Textarea
              id="summary"
              v-model="summary"
              placeholder="Masukkan kesimpulan gangguan fungsi"
            />
          </div>
        </div>

        <Separator />

        <!-- REKOMENDASI TERAPI -->
        <div>
          <h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
          <div class="grid grid-cols-3 gap-2">
            <div
              v-for="opt in therapyOptions"
              :key="opt"
              class="flex items-center space-x-2"
            >
              <Checkbox
                :id="opt"
                :value="opt"
                v-model="therapies"
              />
              <Label
                :for="opt"
                class="text-sm"
              >
                {{ opt }}
              </Label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>
