<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import api from '~/services/api';
import type { KategoriOperasi } from '~/types/antrean';

definePageMeta({
  middleware: 'auth'
});

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

const kategoriOperasiList = ref<KategoriOperasi[]>([]);
const isLoadingKategori = ref(false);

// Fetch kategori operasi from API
const fetchKategoriOperasi = async () => {
    try {
        isLoadingKategori.value = true;
        const response = await api.get('/kategori');
        
        if (response.data.success && response.data.data) {
            kategoriOperasiList.value = response.data.data;
        }
    } catch (error) {
        console.error('Error fetching kategori operasi:', error);
    } finally {
        isLoadingKategori.value = false;
    }
};

// Initial fetch
onMounted(() => {
    fetchKategoriOperasi();
});

// Function to count antrian by kategori operasi id (static for now)
const countAntreanByKategori = (idKategoriOperasi: number) => {
    return 0; // Static count for now
};

</script>
<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        
        <!-- Loading State -->
        <v-col v-if="isLoadingKategori" cols="12" class="text-center py-8">
            <v-progress-circular indeterminate color="primary"></v-progress-circular>
            <p class="text-medium-emphasis mt-2">Loading...</p>
        </v-col>
        
        <!-- Empty State -->
        <v-col v-else-if="kategoriOperasiList.length === 0" cols="12" class="text-center py-8">
            <v-icon size="large" class="mb-2 text-medium-emphasis">mdi-information-outline</v-icon>
            <p class="text-medium-emphasis">No kategori found</p>
        </v-col>
        
        <!-- Kategori Cards -->
        <v-col 
            v-for="kategori in kategoriOperasiList" 
            :key="kategori.id"
            cols="12"
            md="4"
        >
            <v-card elevation="10" class="h-100">
                <NuxtLink :to="`/antrean/kategori/${kategori.id}`" style="text-decoration: none; color: inherit;">
                    <v-card-item style="cursor: pointer;" class="v-card-item--link">
                        <div class="d-flex align-center justify-space-between">
                            <h5 class="text-h6 font-weight-bold">{{ kategori.kategori }}</h5>
                            <v-icon size="large" color="primary">mdi-chevron-right</v-icon>
                        </div>
                        <v-chip class="mt-3 mb-0"  color="primary" size="small">{{ countAntreanByKategori(kategori.id) }} Antrean</v-chip>
                    </v-card-item>
                </NuxtLink>
            </v-card>
        </v-col>
    </v-row>
</template> 