<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 data = ref([
  {
    id: 'RSC001',
    resource_type: 'Encounter',
    patient: {
      name: 'Ahmad Wepe',
      mrn: 'RM001234',
    },
    status: 2,
    updated_at: '2025-03-12',
    fhir_id: 'ENC-00123',
  },
  {
    id: 'RSC002',
    resource_type: 'Encounter',
    patient: {
      name: 'Siti Aminah',
      mrn: 'RM001235',
    },
    status: 1,
    updated_at: '2025-03-10',
    fhir_id: 'ENC-001235',
  },
  {
    id: 'RSC003',
    resource_type: 'Encounter',
    patient: {
      name: 'Budi Antono',
      mrn: 'RM001236',
    },
    status: 0,
    updated_at: '2025-03-11',
    fhir_id: 'ENC-001236',
  },
])

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

const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)

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

const headerPrep: 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, 500))
    service.status = 'connected'
    // service.status = 'error'
    service.sessionActive = true
    // service.sessionActive = false
  } finally {
    isLoading.satusehatConn = false
  }
}

onMounted(() => {
  callSatuSehat()
})

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
</script>

<template>
  <PubNavHeaderPrep :prep="headerPrep" :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>
    <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
  </div>
</template>
