<script setup lang="ts">
import api from '~/services/api';
import type { AntreanKategoriOperasi } from '~/types/antrean';
import { numberFormat } from '~/utils/helpers';
import LoadingState from '@/components/shared/LoadingState.vue';

definePageMeta({
  middleware: 'auth',
  pageTitle: 'Antrean Operasi per Kategori'
});

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

// Fetch kategori operasi from API
const fetchKategoriOperasi = async () => {
    try {
        isLoadingKategori.value = true;
        const response = await api.get('/dashboard/antrian-per-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();
});


</script>
<template>
    <LoadingState
        :loading="isLoadingKategori"
        :empty="kategoriOperasiList.length === 0 && !isLoadingKategori"
        loading-text="Memuat data kategori..."
        empty-text="Tidak ada data kategori operasi"
    >
        <v-row>
            <v-col 
                v-for="kategori in kategoriOperasiList" 
                :key="kategori.id_kategori"
                cols="12"
                md="4"
            >
                <v-card elevation="10" class="h-100">
                    <NuxtLink :to="`/antrean/kategori/${kategori.id_kategori}?category=${encodeURIComponent(kategori.kategori)}`" 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">
                                {{ numberFormat(kategori.jumlah_antrean) }} Antrean
                            </v-chip>
                        </v-card-item>
                    </NuxtLink>
                </v-card>
            </v-col>
        </v-row>
    </LoadingState>
</template> 