<script setup lang="ts">
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
import { Calendar, ChevronDown, ChevronUp, Hospital, UserRoundCheck, UsersRound } from 'lucide-vue-next'
import { cn } from '~/lib/utils'

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (_val: string) => {
    // filter patient list
  },
  onClear: () => {
    // clear url param
  },
}

const hreaderPrep: HeaderPrep = {
  title: 'Pasien',
  icon: 'i-lucide-add',
  addNav: {
    label: 'Tambah',
    onClick: () => navigateTo('/patient/add'),
  },
}

// NOTE: example api
async function getPatientList() {
  // const response = await xfetch('/api/v1/patient')
  // console.log('data patient', response)
}

onMounted(() => {
  getPatientList()
})

// const patients = [
//   {
//     noRM: 'RM001',
//     nama: 'Siti Nurhaliza',
//     umur: 34,
//     jenisKelamin: 'Perempuan',
//     kontak: '081234567890',
//     kunjunganTerakhir: '2025-08-01',
//     status: 'active',
//     bpjs: true,
//   },
// ]

const summaryCard = computed(() => {
  return [
    {
      title: 'Total Pasien',
      icon: UsersRound,
      value: 234,
      change: 12.5,
      isPositive: true,
      period: 'from last month',
    },
    {
      title: 'Pasien Aktif',
      icon: UserRoundCheck,
      value: 1340,
      change: 8.3,
      isPositive: true,
      period: 'from last week',
    },
    {
      title: 'Kunjungan Hari Ini',
      icon: Calendar,
      value: 200,
      change: 5.2,
      isPositive: false,
      period: 'from yesterday',
    },
    {
      title: 'Peserta BPJS',
      icon: Hospital,
      value: 10223,
      change: 15.7,
      isPositive: true,
      period: 'from last month',
    },
  ]
})
</script>

<template>
  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
  <main class="flex flex-1 flex-col gap-4 md:gap-8">
    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
      <Card v-for="report in summaryCard" :key="report.title">
        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle class="text-sm font-medium"> {{ report.title }} </CardTitle>
          <component :is="report.icon" class="text-muted-foreground h-4 w-4" />
        </CardHeader>
        <CardContent>
          <div class="text-2xl font-bold">
            {{ report.value.toLocaleString('id-ID') }}
          </div>
          <p class="text-muted-foreground flex items-center gap-1 text-xs">
            <component
              :is="report.isPositive ? ChevronUp : ChevronDown"
              :class="cn('h-4 w-4', { 'text-green-500': report.isPositive }, { 'text-red-500': !report.isPositive })"
            />
            <span class="font-medium" :class="report.isPositive ? 'text-green-500' : 'text-red-500'">
              {{ report.change.toFixed(1) }}%
            </span>
            <span>{{ report.period }}</span>
          </p>
        </CardContent>
      </Card>
    </div>
  </main>
</template>
