<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'

interface Masalah {
  id: number
  date: string
  diagnosa: string
  finishDate: string
  staff: string
}

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 })

// Subjective
const [primaryComplaint, primaryComplaintAttrs] = defineField('pri-complain')
const [medType, medTypeAttrs] = defineField('med-type')
const [medName, medNameAttrs] = defineField('med-name')
const [medReaction, medReactionAttrs] = defineField('med-reaction')
const [foodType, foodTypeAttrs] = defineField('food-type')
const [foodName, foodNameAttrs] = defineField('food-name')
const [foodReaction, foodReactionAttrs] = defineField('food-reaction')
const [otherType, otherTypeAttrs] = defineField('other-type')
const [otherName, otherNameAttrs] = defineField('other-name')
const [otherReaction, otherReactionAttrs] = defineField('other-reaction')
const [painAsst, painAsstAttrs] = defineField('pain-asst')
const [painScale, painScaleAttrs] = defineField('pain-scale')
const [painTime, painTimeAttrs] = defineField('pain-time')
const [painDuration, painDurationAttrs] = defineField('pain-duration')
const [painFreq, painFreqAttrs] = defineField('pain-freq')
const [painLoc, painLocAttrs] = defineField('pain-loc')
const [nutScreening, nutScreeningAttrs] = defineField('nut-screening')
const [spiritualAsst, spiritualAsstAttrs] = defineField('spiritual-asst')

// Objective
const [generalCondition, generalConditionAttrs] = defineField('general-condition')
const [supportExam, supportExamAttrs] = defineField('support-exam')
const [riskFall, riskFallAttrs] = defineField('risk-fall')
const [bracelet, braceletAttrs] = defineField('bracelet')
const [braceletAlg, braceletAlgAttrs] = defineField('bracelet-alg')

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

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

const form = ref<Masalah>({
  id: 0,
  date: '',
  diagnosa: '',
  finishDate: '',
  staff: '',
})

const list = ref<Masalah[]>([])
const isEditing = ref(false)
const showForm = ref(false)

const resetForm = () => {
  form.value = {
    id: 0,
    date: '',
    diagnosa: '',
    finishDate: '',
    staff: '',
  }
  isEditing.value = false
}

const openAdd = () => {
  resetForm()
  showForm.value = true
}

const submitForm = () => {
  if (isEditing.value) {
    const index = list.value.findIndex((v) => v.id === form.value.id)
    if (index !== -1) list.value[index] = { ...form.value }
  } else {
    list.value.push({
      ...form.value,
      id: Date.now(),
    })
    emit('click', { type: 'add-problem', data: list.value })
  }

  showForm.value = false
  resetForm()
}

const editItem = (item: Masalah) => {
  form.value = { ...item }
  isEditing.value = true
  showForm.value = true
}

const deleteItem = (id: number) => {
  list.value = list.value.filter((v) => v.id !== id)
}

defineExpose({ validate })
const icdPreview = inject('icdPreview')

const isExcluded = (key: string) => props.excludeFields?.includes(key)
</script>

<template>
  <form id="entry-form">
    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
      <div>
        <h1 class="font-semibold">A. Data Subyektif</h1>
      </div>

      <div class="my-2">
        <Block>
          <Cell>
            <Label dynamic>Keluhan Pasien</Label>
            <Field :errMessage="errors['pri-complain']">
              <Textarea
                v-model="primaryComplaint"
                v-bind="primaryComplaintAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>
      <div class="my-2 rounded-md border border-slate-300 p-4">
        <span class="mb-4 text-sm font-semibold">Riwayat Alergi dan Reaksi Alergi</span>
        <Block
          :colCount="3"
          class="mt-2"
        >
          <Cell>
            <Label dynamic>a. Obat</Label>
            <Field>
              <Input
                v-model="medType"
                v-bind="medTypeAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Sebutkan</Label>
            <Field>
              <Input
                v-model="medName"
                v-bind="medNameAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Reaksi</Label>
            <Field>
              <Input
                v-model="medReaction"
                v-bind="medReactionAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block
          :colCount="3"
          class="mt-2"
        >
          <Cell>
            <Label dynamic>b. Makanan</Label>
            <Field>
              <Input
                v-model="foodType"
                v-bind="foodTypeAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Sebutkan</Label>
            <Field>
              <Input
                v-model="foodName"
                v-bind="foodNameAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Reaksi</Label>
            <Field>
              <Input
                v-model="foodReaction"
                v-bind="foodReactionAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block
          :colCount="3"
          class="mt-2"
        >
          <Cell>
            <Label dynamic>c. Lain-Lain</Label>
            <Field>
              <Input
                v-model="otherType"
                v-bind="otherTypeAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Sebutkan</Label>
            <Field>
              <Input
                v-model="otherName"
                v-bind="otherNameAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Reaksi</Label>
            <Field>
              <Input
                v-model="otherReaction"
                v-bind="otherReactionAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>
      <div class="my-4">
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Kajian Nyeri</Label>
            <Field>
              <Input
                v-model="painAsst"
                v-bind="painAsstAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Skala Nyeri</Label>
            <Field>
              <Input
                v-model="painScale"
                v-bind="painScaleAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Waktu Nyeri</Label>
            <Field>
              <Input
                v-model="paintTime"
                v-bind="painTimeAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Durasi Nyeri</Label>
            <Field>
              <Input
                v-model="painDuration"
                v-bind="painDurationAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Frequensi Nyeri</Label>
            <Field>
              <Input
                v-model="painFreq"
                v-bind="painFreqAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Lokasi</Label>
            <Field>
              <Input
                v-model="painLoc"
                v-bind="painLocAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Skrining Nutrisi</Label>
            <Field>
              <Textarea
                v-model="nutScreening"
                v-bind="nutScreeningAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Kajian Spiritual</Label>
            <Field>
              <Textarea
                v-model="spiritualAsst"
                v-bind="spiritualAsstAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="font-semibold">B. Data Obyektif</h1>
      </div>

      <div class="my-2">
        <Block :colCount="2">
          <Cell>
            <Label dynamic>Keadaan Umum</Label>
            <Field>
              <Textarea
                v-model="generalCondition"
                v-bind="generalConditionAttrs"
              />
            </Field>
          </Cell>
          <Cell>
            <Label dynamic>Pemeriksaan Penunjang</Label>
            <Field>
              <Input
                v-model="supportExam"
                v-bind="supportExamAttrs"
              />
            </Field>
          </Cell>
        </Block>
        <Block :colCount="3">
          <Cell>
            <Label dynamic>Risiko Jatuh</Label>
            <Field>
              <Input
                v-model="riskFall"
                v-bind="riskFallAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Pemakaian Gelang</Label>
            <Field>
              <Input
                v-model="bracelet"
                v-bind="braceletAttrs"
              />
            </Field>
          </Cell>

          <Cell>
            <Label dynamic>Pasang Gelang Alergi</Label>
            <Field>
              <Input
                v-model="braceletAlg"
                v-bind="braceletAlgAttrs"
              />
            </Field>
          </Cell>
        </Block>
      </div>

      <Separator class="mt-8" />

      <div class="my-2">
        <h1 class="my-3 font-semibold">C. Daftar Masalah Keperawatan</h1>

        <Button
          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
          type="button"
          @click="showForm = true"
        >
          + Tambah
        </Button>
      </div>

      <div
        v-if="showForm"
        class="mb-4 space-y-3 rounded border bg-gray-50 p-4 shadow-sm"
      >
        <div>
          <Label>Tanggal Muncul</Label>
          <Input
            v-model="form.date"
            type="date"
          />
        </div>

        <div>
          <Label class="font-medium">Diagnosa Keperawatan</Label>
          <Input v-model="form.diagnosa" />
        </div>

        <div>
          <Label class="font-medium">Tanggal Teratasi</Label>
          <Input
            v-model="form.finishDate"
            type="date"
          />
        </div>

        <div>
          <Label class="font-medium">Nama Petugas</Label>
          <Input v-model="form.staff" />
        </div>

        <div class="mt-2 flex gap-2">
          <Button
            @click="submitForm"
            type="button"
          >
            {{ isEditing ? 'Update' : 'Tambah' }}
          </Button>

          <Button
            @click="showForm = false"
            type="button"
            class="rounded bg-gray-300 px-3 py-1"
          >
            Batal
          </Button>
        </div>
      </div>

      <div class="mb-8">
        <table class="w-full border text-sm">
          <thead class="bg-gray-100">
            <tr>
              <th class="border p-2">Tanggal Muncul</th>
              <th class="border p-2">Diagnosa</th>
              <th class="border p-2">Tanggal Teratasi</th>
              <th class="border p-2">Petugas</th>
              <th class="w-28 border p-2">Aksi</th>
            </tr>
          </thead>

          <tbody>
            <tr
              v-for="item in list"
              :key="item.id"
              class="border"
            >
              <td class="border p-2">{{ item.date }}</td>
              <td class="border p-2">{{ item.diagnosa }}</td>
              <td class="border p-2">{{ item.finishDate }}</td>
              <td class="border p-2">{{ item.staff }}</td>
              <td class="flex justify-center gap-4 border p-2">
                <Icon
                  @click="editItem(item)"
                  name="i-lucide-pencil"
                  class="h-4 w-4 cursor-pointer"
                />

                <Icon
                  @click="deleteItem(item.id)"
                  name="i-lucide-trash"
                  class="h-4 w-4 cursor-pointer"
                />
              </td>
            </tr>

            <tr v-if="list.length === 0">
              <td
                colspan="5"
                class="p-4 text-center text-gray-500"
              >
                Belum ada data
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>
</template>
