<script setup lang="ts">
//
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { getDetail } from '~/services/encounter.service'

//
import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'

// PLASE ORDER BY TAB POSITION
import ProtocolList from '~/components/app/chemotherapy/list.protocol.vue'
import MedicineProtocolList from '~/components/app/chemotherapy/list.medicine.vue'

const route = useRoute()
const router = useRouter()

// activeTab selalu sinkron dengan query param
const activeTab = computed({
  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'chemotherapy-protocol'),
  set: (val: string) => {
    router.replace({ path: route.path, query: { tab: val } })
  },
})

const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
const dataRes = await getDetail(id, {
  includes:
    'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person',
})
const dataResBody = dataRes.body ?? null
const data = dataResBody?.data ?? null

// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
const protocolRows = [
  {
    number: '1',
    tanggal: new Date().toISOString().substring(0, 10),
    siklus: 'I',
    periode: 'Siklus I',
    kehadiran: 'Hadir',
    action: '',
  },
  {
    number: '2',
    tanggal: new Date().toISOString().substring(0, 10),
    siklus: 'II',
    periode: 'Siklus II',
    kehadiran: 'Tidak Hadir',
    action: '',
  },
]

const paginationMeta = {
  recordCount: protocolRows.length,
  page: 1,
  pageSize: 10,
  totalPage: 1,
  hasNext: false,
  hasPrev: false,
}

const tabs: TabItem[] = [
  { value: 'chemotherapy-protocol', label: 'Protokol Kemoterapi', component: ProtocolList, props: { data: protocolRows, paginationMeta } },
  { value: 'chemotherapy-medicine', label: 'Protokol Obat Kemoterapi', component: MedicineProtocolList, props: { data: protocolRows, paginationMeta } },
]
</script>

<template>
  <div class="w-full">
    <div class="mb-4">
      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
    </div>
    <AppEncounterQuickInfo :data="data" />
    <CompTab
      :data="tabs"
      :initial-active-tab="activeTab"
      @change-tab="activeTab = $event"
    />
  </div>
</template>

