<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head } from '@inertiajs/vue3';
import { TrendingUp, Package, Clock, CheckCircle, Users, DollarSign } from 'lucide-vue-next';

const props = defineProps<{
    stats: {
        today_orders: number;
        total_income: number;
        pending_orders: number;
        completed_orders: number;
        active_shops: number;
        total_collected: number;
    };
    service_breakdown: Array<{
        service_type: string;
        count: number;
    }>;
}>();
</script>

<template>
    <AdminLayout>
        <Head title="Unlock Service Dashboard" />

        <div class="animate-fade-in space-y-8 pb-12">
            <div>
                <h1 class="text-3xl font-black text-slate-900 dark:text-white">Unlock Service Dashboard</h1>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Mobile Unlock Service Platform Analytics</p>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-6">
                <!-- Today Orders -->
                <div class="rounded-2xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-lg bg-blue-100 p-3 dark:bg-blue-900/20">
                            <Clock :size="24" class="text-blue-600 dark:text-blue-400" />
                        </div>
                        <div>
                            <p class="text-xs font-bold tracking-widest text-slate-500 dark:text-slate-400 uppercase">Today Orders</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">{{ props.stats.today_orders }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Income -->
                <div class="rounded-2xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-lg bg-green-100 p-3 dark:bg-green-900/20">
                            <DollarSign :size="24" class="text-green-600 dark:text-green-400" />
                        </div>
                        <div>
                            <p class="text-xs font-bold tracking-widest text-slate-500 dark:text-slate-400 uppercase">Total Income</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ props.stats.total_income.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Pending Orders -->
                <div class="rounded-2xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-lg bg-yellow-100 p-3 dark:bg-yellow-900/20">
                            <Package :size="24" class="text-yellow-600 dark:text-yellow-400" />
                        </div>
                        <div>
                            <p class="text-xs font-bold tracking-widest text-slate-500 dark:text-slate-400 uppercase">Pending</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">{{ props.stats.pending_orders }}</p>
                        </div>
                    </div>
                </div>

                <!-- Completed Orders -->
                <div class="rounded-2xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-lg bg-emerald-100 p-3 dark:bg-emerald-900/20">
                            <CheckCircle :size="24" class="text-emerald-600 dark:text-emerald-400" />
                        </div>
                        <div>
                            <p class="text-xs font-bold tracking-widest text-slate-500 dark:text-slate-400 uppercase">Completed</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">{{ props.stats.completed_orders }}</p>
                        </div>
                    </div>
                </div>

                <!-- Active Shops -->
                <div class="rounded-2xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-lg bg-purple-100 p-3 dark:bg-purple-900/20">
                            <Users :size="24" class="text-purple-600 dark:text-purple-400" />
                        </div>
                        <div>
                            <p class="text-xs font-bold tracking-widest text-slate-500 dark:text-slate-400 uppercase">Active Shops</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">{{ props.stats.active_shops }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Collected -->
                <div class="rounded-2xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="flex items-center gap-3">
                        <div class="rounded-lg bg-indigo-100 p-3 dark:bg-indigo-900/20">
                            <TrendingUp :size="24" class="text-indigo-600 dark:text-indigo-400" />
                        </div>
                        <div>
                            <p class="text-xs font-bold tracking-widest text-slate-500 dark:text-slate-400 uppercase">Collected</p>
                            <p class="text-2xl font-black text-slate-900 dark:text-white">${{ props.stats.total_collected.toFixed(2) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service Breakdown -->
            <div class="rounded-4xl border border-slate-200/60 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <h3 class="text-xl font-black text-slate-900 dark:text-white mb-6">Service Breakdown</h3>
                <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
                    <div v-for="service in props.service_breakdown" :key="service.service_type" class="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-900/50">
                        <p class="text-sm font-bold text-slate-600 dark:text-slate-400 uppercase">{{ service.service_type }}</p>
                        <p class="text-3xl font-black text-slate-900 dark:text-white">{{ service.count }}</p>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
