<script setup lang="ts">
import { ref, computed } from 'vue'

// Components
import AppChemotherapyList from '~/components/app/chemotherapy/list.vue'

// Samples
import { sampleRows, type ChemotherapyData } from '~/components/app/chemotherapy/sample'

const search = ref('')
const dateFrom = ref('')
const dateTo = ref('')

// filter + pencarian sederhana (client-side)
const filtered = computed(() => {
  const q = search.value.trim().toLowerCase()
  return sampleRows.filter((r: ChemotherapyData) => {
    if (q) {
      return r.nama.toLowerCase().includes(q) || r.noRm.toLowerCase().includes(q) || r.dokter.toLowerCase().includes(q)
    }
    return true
  })
})
</script>

<template>
  <div class="mx-auto max-w-full">
    <div class="border-b p-6">
      <h1 class="text-2xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h1>
      <p class="mt-1 text-sm text-gray-500">
        Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan
      </p>
    </div>

    <div class="flex flex-wrap items-center gap-3 border-b p-4">
      <div class="flex items-center gap-2">
        <input
          v-model="search"
          placeholder="Cari Nama / No.RM"
          class="w-64 rounded border px-3 py-2"
        />
      </div>

      <div class="flex items-center gap-2">
        <input
          v-model="dateFrom"
          type="date"
          class="rounded border px-3 py-2"
        />
        <span class="text-sm text-gray-500">-</span>
        <input
          v-model="dateTo"
          type="date"
          class="rounded border px-3 py-2"
        />
      </div>

      <button class="ml-auto rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">Filter</button>
    </div>

    <div class="overflow-x-auto p-4">
      <AppChemotherapyList
        :data="filtered"
        :pagination-meta="{
          recordCount: 2,
          page: 1,
          pageSize: 10,
          totalPage: 1,
          hasPrev: false,
          hasNext: false,
        }"
      />
    </div>
  </div>
</template>
