<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, Ellipsis, Search, Send } from 'lucide-vue-next'

// State management
const data = ref([])
const isLoading = reactive({
  satusehatConn: true,
  dataList: false,
})

// Filter states
const filters = reactive({
  search: '',
  status: '',
  resource_type: 'all',
  date_from: '',
  date_to: '',
  page: 1,
  limit: 10,
})

// Pagination state
const pagination = ref({
  total: 0,
  page: 1,
  limit: 10,
  total_pages: 0,
  has_next: false,
  has_prev: false,
})

// API function to fetch data
async function fetchData() {
  try {
    isLoading.dataList = true
    const response: any = await $fetch('/api/v1/satusehat/list', {
      method: 'POST',
      body: {
        status: filters.status !== '' ? Number(filters.status) : undefined,
        resource_type: filters.resource_type,
        date_from: filters.date_from,
        date_to: filters.date_to,
        search: filters.search,
        page: filters.page,
        limit: filters.limit,
      },
    })

    if (response.success) {
      data.value = response.data
      pagination.value = response.meta
    }
  } catch (error) {
    console.error('Error fetching data:', error)
  } finally {
    isLoading.dataList = false
  }
}

// Debounced search function
const debouncedFetchData = useDebounceFn(fetchData, 500)

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (val: string) => {
    filters.search = val
    filters.page = 1
    debouncedFetchData()
  },
  onClear: () => {
    filters.search = ''
    filters.page = 1
    fetchData()
  },
}

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

// Filter change handlers
function onStatusChange(status: string) {
  filters.status = status
  filters.page = 1
  fetchData()
}

function onResourceTypeChange(resourceType: string) {
  filters.resource_type = resourceType
  filters.page = 1
  fetchData()
}

function onDateRangeChange(dateFrom: string, dateTo: string) {
  filters.date_from = dateFrom
  filters.date_to = dateTo
  filters.page = 1
  fetchData()
}

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
  }
}

// Watch for tab changes
watch(() => filters.resource_type, (newType) => {
  onResourceTypeChange(newType)
})

onMounted(async () => {
  await callSatuSehat()
  await fetchData()
})

provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)

const tabs = [
  {
    value: 'all',
    label: 'Semua Resource',
  },
  {
    value: 'patient',
    label: 'Patient',
  },
  {
    value: 'encounter',
    label: 'Encounter',
  },
  {
    value: 'observation',
    label: 'Observation',
  },
]

// Status filter options
const statusOptions = [
  { value: '', label: 'Semua Status' },
  { value: '0', label: 'Failed' },
  { value: '1', label: 'Pending' },
  { value: '2', label: 'Success' },
]
const actions = [
  {
    value: 'filter',
    label: 'Filter',
    icon: 'i-lucide-list-filter',
  },
  {
    value: 'export',
    label: 'Ekspor',
    icon: 'i-lucide-download',

  },
]

// Sync activeTabFilter with filters.resource_type
const activeTabFilter = computed({
  get: () => filters.resource_type,
  set: (value) => {
    filters.resource_type = value
  },
})
</script>

<template>
  <PubNavHeaderPrep :prep="headerPrep" :ref-search-nav="refSearchNav" />
  <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
    <PubBaseServiceStatus v-bind="service" />
    <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn" :summary-data="summaryData" />
  </div>
  <div class="rounded-md border p-4">
    <h2 class="text-md font-semibold py-2">FHIR Resource</h2>
    <Tabs v-model="activeTabFilter">
      <div class="scrollbar-hide overflow-x-auto flex gap-2 justify-between">
        <TabsList>
          <TabsTrigger
            v-for="tab in tabs"
            :key="tab.value"
            :value="tab.value"
            class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
          >
            {{ tab.label }}
          </TabsTrigger>
        </TabsList>
        <div class="flex gap-2 items-center">
          <!-- Status Filter -->
          <Select v-model="filters.status" @update:model-value="onStatusChange">
            <SelectTrigger class="w-40 h-9">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem v-for="option in statusOptions" :key="option.value" :value="option.value">
                {{ option.label }}
              </SelectItem>
            </SelectContent>
          </Select>

          <!-- Date Range Picker -->
          <AppSatusehatPicker @date-change="onDateRangeChange" />

          <!-- Search Input -->
          <div class="relative w-full max-w-sm">
            <Input
              id="search"
              v-model="filters.search"
              type="text"
              placeholder="Cari pasien..."
              class="pl-7 h-9"
              @input="refSearchNav.onInput(filters.search)"
            />
            <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
              <Search class="size-4 text-muted-foreground" />
            </span>
          </div>

          <!-- Action Buttons -->
          <AppSatusehatButtonAction
            v-for="action in actions"
            :key="action.value"
            :icon="action.icon"
            :text="action.label"
          />
        </div>
      </div>
      <div class="mt-4">
        <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
          <div class="rounded-md border p-4">
            <Ellipsis v-if="isLoading.satusehatConn || isLoading.dataList" class="size-6 animate-pulse text-muted-foreground mx-auto" />
            <AppSatusehatList v-if="!isLoading.satusehatConn && !isLoading.dataList" :data="data" />

            <!-- Pagination -->
            <div v-if="!isLoading.satusehatConn && !isLoading.dataList && pagination.total > 0" class="mt-4 flex justify-between items-center">
              <div class="text-sm text-muted-foreground">
                Menampilkan {{ ((pagination.page - 1) * pagination.limit) + 1 }} -
                {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
                dari {{ pagination.total }} data
              </div>
              <div class="flex gap-2">
                <Button
                  v-if="pagination.has_prev"
                  variant="outline"
                  size="sm"
                  @click="filters.page--; fetchData()"
                >
                  Sebelumnya
                </Button>
                <Button
                  v-if="pagination.has_next"
                  variant="outline"
                  size="sm"
                  @click="filters.page++; fetchData()"
                >
                  Selanjutnya
                </Button>
              </div>
            </div>
          </div>
        </TabsContent>
      </div>
    </Tabs>
  </div>
</template>
