<script setup lang="ts">
import type { ServiceStatus } from '~/components/pub/base/service-status.type'
import type { Summary } from '~/components/pub/base/summary-card.type'
import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'

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

// Loading state management
const isLoading = reactive({
  satusehatConn: true,
})

const hreaderPrep: HeaderPrep = {
  title: 'SATUSEHAT Integration',
  icon: 'i-lucide-box',
  addNav: {
    label: 'Kirim Resource',
    icon: 'i-lucide-send',
    // onClick: () => navigateTo('/patient/add'),
  },
}

// SATUSEHAT Service integration
const service = reactive<ServiceStatus>({
  serviceName: 'SATUSEHAT',
  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
  sessionActive: false,
  status: 'connecting',
  isSkeleton: false,
})

// Initial/default data structure
const summaryData: Summary[] = [
  {
    title: 'Resource Terkirim',
    icon: Send,
    metric: 1245,
    trend: 0,
    timeframe: 'daily',
  },
  {
    title: 'Sync Success',
    icon: CircleCheckBig,
    metric: '97%',
    trend: 0,
    timeframe: 'daily',
  },
  {
    title: 'Pending Queue',
    icon: CircleDashed,
    metric: 32,
    trend: 0,
    timeframe: 'daily',
  },
  {
    title: 'Failed Items',
    icon: CircleX,
    metric: 10,
    trend: 0,
    timeframe: 'daily',
  },
]

async function callSatuSehat() {
  try {
    await new Promise((resolve) => setTimeout(resolve, 3000))
    service.status = 'connected'
    // service.status = 'error'
    service.sessionActive = true
    // service.sessionActive = false
  } finally {
    isLoading.satusehatConn = false
  }
}

onMounted(() => {
  callSatuSehat()
})
</script>

<template>
  <PubNavHeaderPrep :prep="hreaderPrep" :ref-search-nav="refSearchNav" />
  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
    <PubBaseServiceStatus v-bind="service" />
    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
      <template v-if="isLoading.satusehatConn">
        <PubBaseSummaryCard v-for="n in 4" :key="n" is-skeleton :stat="summaryData[n]" />
      </template>
      <template v-else>
        <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
      </template>
    </div>
  </div>
</template>
