<script setup>
import Button from 'primevue/button';
import Card from 'primevue/card';
import Message from 'primevue/message';
import ProgressSpinner from 'primevue/progressspinner';
import { onMounted, ref } from 'vue';
import { statisticsService } from '../api/statisticsService';

const loading = ref(true);
const error = ref(null);

const stats = ref({
    "post_draft": 0,
    "post_published": 0,
    "media": 0,
    "order": 0,
    "user": 0,
    "amount": 0
})

const fetchCounts = async () => {
    loading.value = true;
    error.value = null;

    try {
        // Use the API service instead of direct fetch calls
        const { data } = await statisticsService.get();

        stats.value = data;
    } catch (err) {
        console.error('Error fetching data:', err);
        error.value = 'Failed to load data. Please try again later.';
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    fetchCounts();
});
</script>

<template>
    <div class="w-full">
        <div class="flex justify-between items-center mb-8  pb-2">
            <h1 class="m-0 text-2xl text-gray-800 font-medium">Dashboard</h1>
            <Button @click="fetchCounts" icon="pi pi-refresh" rounded text aria-label="Refresh" />
        </div>

        <div v-if="loading" class="flex flex-col items-center justify-center py-12 text-center min-h-[200px]">
            <ProgressSpinner />
            <p class="mt-4 text-gray-500">Loading data...</p>
        </div>

        <div v-else-if="error" class="flex flex-col items-center justify-center py-12 text-center min-h-[200px]">
            <Message severity="error" :closable="false">{{ error }}</Message>
            <Button @click="fetchCounts" label="Retry" icon="pi pi-refresh" severity="secondary" class="mt-3" />
        </div>

        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 my-8">

            <Card class="shadow-none! rounded-none! border border-gray-100">
                <template #header>
                    <div class="border border-primary"></div>
                </template>
                <template #title>媒体数量</template>
                <template #content>
                    <div class="text-4xl font-bold mb-2 text-primary">{{ stats.media }}</div>
                </template>
            </Card>

            <Card class="shadow-none! rounded-none! border border-gray-100">
                <template #header>
                    <div class="border border-primary"></div>
                </template>
                <template #title>曲谱数量</template>
                <template #content>
                    <div class="text-4xl font-bold mb-2 text-primary">
                        {{ stats.post_published }}/{{ stats.post_draft }}
                    </div>
                    <div class="text-sm text-gray-500">已发布/未发布</div>
                </template>
            </Card>

            <Card class="shadow-none! rounded-none! border border-gray-100">
                <template #header>
                    <div class="border border-primary"></div>
                </template>
                <template #title>订单数量</template>
                <template #content>
                    <div class="text-4xl font-bold mb-2 text-primary">{{ stats.order }}</div>
                </template>
            </Card>

            <Card class="shadow-none! rounded-none! border border-gray-100">
                <template #header>
                    <div class="border border-primary"></div>
                </template>
                <template #title>用户数量</template>
                <template #content>
                    <div class="text-4xl font-bold mb-2 text-primary">{{ stats.user }}</div>
                </template>
            </Card>


            <Card class="shadow-none! rounded-none! border border-gray-100">
                <template #header>
                    <div class="border border-primary"></div>
                </template>
                <template #title>订单收入</template>
                <template #content>
                    <div class="text-4xl font-bold mb-2 text-primary">{{ (stats.amount / 100).toFixed(2) }}</div>
                </template>
            </Card>

        </div>
    </div>
</template>
