<script setup lang="ts">
// Components
import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'

// Types
import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'

// Configs
import { config } from './list-cfg.protocol'

const searchQuery = ref('')

function handleSearch(event: Event) {
  const target = event.target as HTMLInputElement
  searchQuery.value = target.value
  // TODO: Implement search logic here
  // You can emit an event to parent or filter data directly
}

interface Props {
  data: any[]
  paginationMeta: PaginationMeta
}

defineProps<Props>()

const emit = defineEmits<{
  pageChange: [page: number]
}>()

function handlePageChange(page: number) {
  emit('pageChange', page)
}
</script>

<template>
  <div class="space-y-4">
    <!-- Title and Search Section -->
    <div class="flex flex-col items-start">
      <div class="flex items-center justify-between w-full">
        <div>
          <h2 class="mb-1 text-xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
          <p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
        </div>
      </div>

      <div class="relative mt-10 w-72">
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Cari jadwal pemeriksaan..."
          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
          @input="handleSearch"
        />
        <span class="absolute right-3 top-2.5 text-gray-400">
          <i class="ri-search-line"></i>
        </span>
      </div>
    </div>

    <PubMyUiDataTable
      v-bind="config"
      :rows="data"
      :skeleton-size="paginationMeta?.pageSize"
    />
    <PaginationView
      :pagination-meta="paginationMeta"
      @page-change="handlePageChange"
    />
  </div>
</template>
