<script setup lang="ts">
// Helpers
import { format, parseISO } from 'date-fns'
import { id as localeID } from 'date-fns/locale'
import { getAge } from '~/lib/date'
import { cn } from "~/lib/utils"

// Types
import type { Encounter } from '~/models/encounter'
import { paymentTypes } from '~/lib/constants.vclaim'

const props = defineProps<{
  data: Encounter
  isGrid?: boolean
}>()

const isGrid = props.isGrid !== undefined ? props.isGrid : true

// Address
const address = computed(() => {
  if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
    return props.data.patient.person.addresses.map((a) => a.address).join(', ')
  }
  return '-'
})

// DPJP
const dpjp = computed(() => {
  if (props.data.responsible_doctor) {
    const dp = props.data.responsible_doctor.employee.person
    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
  } else if (props.data.appointment_doctor) {
    const dp = props.data.appointment_doctor.employee.person
    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
  }
  return '-'
})

// Tgl. Lahir dengan Umur
const birthDateFormatted = computed(() => {
  if (!props.data.patient.person.birthDate) {
    return '-'
  }
  try {
    const ageData = getAge(props.data.patient.person.birthDate)
    const ageYears = ageData.extFormat.split(' ')[0] || '0'
    return `${ageData.idFormat} (${ageYears} Tahun)`
  } catch {
    return '-'
  }
})

// Tgl. Masuk RS dengan waktu
const registeredDateFormatted = computed(() => {
  const dateStr = props.data.registeredAt || props.data.visitDate
  if (!dateStr) {
    return '-'
  }
  try {
    const date = parseISO(dateStr)
    return format(date, 'dd MMMM yyyy HH:mm', { locale: localeID })
  } catch {
    return '-'
  }
})

// Jns. Kelamin
const genderLabel = computed(() => {
  const code = props.data.patient.person.gender_code
  if (!code) return '-'
  // Map common gender codes
  if (code === 'M' || code === 'male' || code.toLowerCase() === 'l') {
    return 'Laki-laki'
  } else if (code === 'F' || code === 'female' || code.toLowerCase() === 'p') {
    return 'Perempuan'
  }
  return code
})

// Jns. Pembayaran
const paymentTypeLabel = computed(() => {
  const code = props.data.paymentMethod_code
  if (!code) return '-'

  // Map payment method codes
  if (code === 'insurance') {
    return 'JKN'
  } else if (code === 'jkn') {
    return 'JKN'
  } else if (code === 'jkmm') {
    return 'JKMM'
  } else if (code === 'spm') {
    return 'SPM'
  } else if (code === 'pks') {
    return 'PKS'
  }

  // Try to get from paymentTypes constant
  if (paymentTypes[code]) {
    return paymentTypes[code].split(' ')[0] // Get first part (e.g., "JKN" from "JKN (Jaminan...)")
  }

  return code
})

// No. Billing - try to get from trx_number or other billing fields
const billingNumber = computed(() => {
  // Check if encounter has payment data with trx_number
  if ((props.data as any).trx_number) {
    return (props.data as any).trx_number
  }
  // Check if encounter has payment relation
  if ((props.data as any).payment?.trx_number) {
    return (props.data as any).payment.trx_number
  }
  return '-'
})

// Nama Ruang - from unit name or room relation
const roomName = computed(() => {
  if (props.data.unit?.name) {
    return props.data.unit.name
  }
  // Check if there's a room relation
  if ((props.data as any).room?.name) {
    return (props.data as any).room.name
  }
  return '-'
})

// No Bed - from bed relation or field
const bedNumber = computed(() => {
  // Check if encounter has bed data
  if ((props.data as any).bed?.number) {
    return (props.data as any).bed.number
  }
  if ((props.data as any).bed_number) {
    return (props.data as any).bed_number
  }
  return '-'
})
</script>

<template>
  <h2 class="mb-4 font-semibold md:text-base 2xl:text-lg">Data Pasien:</h2>
  <!-- 4 Column Grid Layout -->
  <div :class="cn('grid grid-cols-4 gap-4', isGrid && 'sm:grid-cols-4')">
    <!-- No. RM -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ data.patient.number || '-' }}
      </p>
    </div>

    <!-- Tgl. Lahir -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tgl. Lahir</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ birthDateFormatted }}
      </p>
    </div>

    <!-- Jns. Pembayaran -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Cara Bayar</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ paymentTypeLabel }}
      </p>
    </div>

    <!-- No Bed -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ bedNumber }}
      </p>
    </div>

    <!-- Nama Pasien -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Bed</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ data.patient.person.name || '-' }}
      </p>
    </div>

    <!-- Tgl. Masuk RS -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tgl. Masuk RS</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ registeredDateFormatted }}
      </p>
    </div>

    <!-- No. Billing -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ billingNumber }}
      </p>
    </div>

    <!-- DPJP -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ dpjp }}
      </p>
    </div>

    <!-- Alamat -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Alamat</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ address }}
      </p>
    </div>

    <!-- Jns. Kelamin -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Jns. Kelamin</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ genderLabel }}
      </p>
    </div>

    <!-- Nama Ruang -->
    <div class="flex gap-1">
      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label>
      <label class="w-2 flex-none">:</label>
      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
        {{ roomName }}
      </p>
    </div>
  </div>
</template>
