<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 { Title } from '#components';
import type { AntreanOperasi } from '~/types/antrean';

definePageMeta({
  middleware: 'auth'
});

const page = ref({ title: 'List Antrean Operasi' });
const breadcrumbs = ref([
    {
        text: 'Antrean',
        disabled: false,
        href: '#'
    },
    {
        text: 'List Antrean Operasi',
        disabled: true,
        href: '#'
    }
]);

const search = ref('');
const antreanList = ref<AntreanOperasi[]>(antreanOperasiData);

const router = useRouter();

// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');

const showSnackbar = (message: string, color: string = 'success') => {
    snackbarMessage.value = message;
    snackbarColor.value = color;
    snackbar.value = true;
};

const headers = [
    { title: 'No Urut', key: 'no', width: '180px', align: 'center' as const },
    { title: 'No Urut Kategori', key: 'no', width: '180px', align: 'center' as const },
    { title: 'No Urut Spesialis', key: 'no', width: '180px', align: 'center' as const },
    { title: 'No Urut Sub Spesialis', key: 'no', width: '220px', align: 'center' as const },
    { 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, width: '250px' },
    { title: 'Status', key: 'status', sortable: true, width: '150px' },
    { title: 'Actions', key: 'actions', sortable: false }
];

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' }
];

const handleView = (item: unknown) => {
    const data = item as AntreanOperasi;
    router.push({
        path: '/antrean/pendaftaran',
        query: {
            mode: 'view',
            id: data.id
        }
    });
};

const handleEdit = (item: unknown) => {
    const data = item as AntreanOperasi;
    router.push({
        path: '/antrean/pendaftaran',
        query: {
            mode: 'edit',
            id: data.id
        }
    });
};

const handleDelete = (item: unknown) => {
    if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
        showSnackbar('Data berhasil dihapus.', 'success');
    }
};
</script>
<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :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="/antrean/pendaftaran"
                        >
                            Daftar Antrean Operasi Baru
                        </v-btn> -->
                    </div>

                    <TableAntrian
                        :headers="headers"
                        :items="antreanList"
                        :search="search"
                        :actions="actions"
                        min-width="1500px"
                        @view="handleView"
                        @edit="handleEdit"
                        @delete="handleDelete"
                    >
                        <template #item.no="{ index }">
                            {{ index + 1 }}
                        </template>
                    </TableAntrian>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>

    <!-- Snackbar for notifications -->
    <v-snackbar
        v-model="snackbar"
        :color="snackbarColor"
        :timeout="3000"
        location="top"
    >
        {{ snackbarMessage }}
        <template #actions>
            <v-btn
                variant="text"
                @click="snackbar = false"
            >
                Close
            </v-btn>
        </template>
    </v-snackbar>
</template>