<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import antreanOperasiData from '~/data/mock/antreanOperasi.json';
import subSpesialisData from '~/data/mock/subSpesialis.json';
import spesialisData from '~/data/mock/spesialis.json';
import type { AntreanOperasi } from '~/types/antrean';

const route = useRoute();
const kodeSubSpesialis = route.params.kode as string;

// Find sub-spesialis info
const subSpesialisInfo = subSpesialisData.find(s => s.kode === kodeSubSpesialis);

definePageMeta({
  middleware: 'auth'
});

const page = ref({ 
    title: subSpesialisInfo ? `List Antrian ${subSpesialisInfo.subspesialis}` : 'List Antrian Sub Spesialis' 
});

const breadcrumbs = ref([
    {
        text: 'Antrean',
        disabled: false,
        href: '/antrean'
    },
    {
        text: 'List Spesialis',
        disabled: false,
        href: '/antrean/list-spesialis'
    },
    {
        text: subSpesialisInfo ? subSpesialisInfo.subspesialis : kodeSubSpesialis,
        disabled: true,
        href: '#'
    }
]);

const search = ref('');
const antreanList = ref<AntreanOperasi[]>(
    antreanOperasiData.filter(antrian => antrian.kodeSubSpesialis === kodeSubSpesialis)
);

const headers = [
    { title: 'No. Urut Sub Spesialis', key: 'no', sortable: false },
    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
    { title: 'No Ktp', key: 'noKtp', sortable: true },
    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true },
    { title: 'Status', key: 'status', sortable: true },
    { title: 'Actions', key: 'actions', sortable: false, width: '120px' }
];

const actions = [
    { icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
    { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
    { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
];

// Get kode spesialis from subSpesialisInfo
const kodeSpesialis = computed(() => {
    if (subSpesialisInfo && subSpesialisInfo.id_spesialis) {
        const spesialis = spesialisData.find(s => s.id === subSpesialisInfo.id_spesialis);
        return spesialis?.kode || '';
    }
    return '';
});

// Computed URL for pendaftaran with query params
const pendaftaranUrl = computed(() => {
    return `/antrean/pendaftaran?kodeSpesialis=${kodeSpesialis.value}&kodeSubSpesialis=${kodeSubSpesialis}`;
});
</script>

<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        <v-col cols="12">
            <v-card elevation="10">
                <v-card-text>
                    <div class="d-flex justify-space-between align-center mb-4">
                        <v-text-field
                            v-model="search"
                            placeholder="Search..."
                            variant="outlined"
                            density="comfortable"
                            hide-details
                            prepend-inner-icon="mdi-magnify"
                            style="max-width: 400px;"
                        ></v-text-field>
                        
                        <!-- <v-btn
                            color="primary"
                            prepend-icon="mdi-plus"
                            :to="pendaftaranUrl"
                        >
                            Daftar Antrean Operasi Baru
                        </v-btn> -->
                    </div>

                    <TableAntrian
                        :headers="headers"
                        :actions="actions"
                        :items="antreanList"
                        :search="search"
                    >
                        <template #item.no="{ index }">
                            {{ index + 1 }}
                        </template>
                    </TableAntrian>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template>
