<script setup lang="ts">
import type { DataTableLoader } from './type'
import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
import { Info } from 'lucide-vue-next'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'

const props = defineProps<{
  skeletonSize?: number
  rows: unknown[]
  cols: Col[]
  header: Th[][]
  keys: string[]
  funcParsed: RecStrFuncUnknown
  funcHtml: RecStrFuncUnknown
  funcComponent: RecStrFuncComponent
}>()

const getSkeletonSize = computed(() => {
  return props.skeletonSize || 5
})
const loader = inject('table_data_loader') as DataTableLoader

function handleActionCellClick(event: Event, _cellRef: string) {
  // Prevent event if clicked directly on the button/dropdown
  const target = event.target as HTMLElement
  if (target.closest('button') || target.closest('[role="button"]')) {
    return
  }

  // Find the dropdown trigger button and click it
  const cell = event.currentTarget as HTMLElement
  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
  if (triggerButton) {
    ;(triggerButton as HTMLButtonElement).click()
  }
}
</script>

<template>
  <Table>
    <TableHeader class="bg-gray-50">
      <TableRow>
        <TableHead
          v-for="(h, idx) in header[0]"
          :key="`head-${idx}`"
          class="border"
          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
        >
          {{ h.label }}
        </TableHead>
      </TableRow>
    </TableHeader>

    <TableBody v-if="loader.isTableLoading">
      <!-- Loading state with 5 skeleton rows -->
      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
        </TableCell>
      </TableRow>
    </TableBody>
    <TableBody v-else-if="rows.length === 0">
      <TableRow>
        <TableCell :colspan="keys.length" class="py-8 text-center">
          <div class="flex items-center justify-center">
            <Info class="size-5 text-muted-foreground" />
            <span class="ml-2">Tidak ada data tersedia</span>
          </div>
        </TableCell>
      </TableRow>
    </TableBody>
    <TableBody v-else>
      <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
        <TableCell
          v-for="(key, cellIndex) in keys"
          :key="`cell-${rowIndex}-${cellIndex}`"
          class="border"
          :class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
          @click="
            key === 'action' && funcComponent[key]
              ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`)
              : null
          "
        >
          <!-- If funcComponent has a renderer -->
          <component
            :is="funcComponent[key]?.(row, rowIndex).component"
            v-if="funcComponent[key]"
            :ref="key === 'action' ? `actionComponent-${rowIndex}-${cellIndex}` : undefined"
            :rec="row"
            :idx="rowIndex"
            v-bind="funcComponent[key]?.(row, rowIndex).props"
          />
          <!-- If funcParsed or funcHtml returns a value -->
          <template v-else>
            <!-- Use v-html for funcHtml to render HTML content -->
            <div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row, rowIndex)"></div>
            <!-- Use normal interpolation for funcParsed and regular data -->
            <template v-else>
              {{ funcParsed[key]?.(row, rowIndex) ?? (row as any)[key] }}
            </template>
          </template>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>
