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

const props = defineProps<{
    stats: {
        today_orders: number;
        pending_orders: number;
        completed_orders: number;
        total_income: number;
        balance: number;
    };
}>();
</script>

<template>
    <ShopLayout>
        <Head title="Dashboard" />

        <div class="space-y-8">
            <div>
                <h2 class="text-2xl font-black text-white">Dashboard</h2>
                <p class="text-slate-400">Welcome to your unlock service platform</p>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-5">
                <!-- Today Orders -->
                <div class="rounded-2xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-900 p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-400">Today Orders</p>
                            <p class="text-4xl font-black text-white">{{ props.stats.today_orders }}</p>
                        </div>
                        <div class="rounded-xl bg-blue-500/10 p-3">
                            <Clock :size="28" class="text-blue-400" />
                        </div>
                    </div>
                </div>

                <!-- Pending Orders -->
                <div class="rounded-2xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-900 p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-400">Pending Orders</p>
                            <p class="text-4xl font-black text-white">{{ props.stats.pending_orders }}</p>
                        </div>
                        <div class="rounded-xl bg-yellow-500/10 p-3">
                            <AlertCircle :size="28" class="text-yellow-400" />
                        </div>
                    </div>
                </div>

                <!-- Completed Orders -->
                <div class="rounded-2xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-900 p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-400">Completed</p>
                            <p class="text-4xl font-black text-white">{{ props.stats.completed_orders }}</p>
                        </div>
                        <div class="rounded-xl bg-green-500/10 p-3">
                            <CheckCircle :size="28" class="text-green-400" />
                        </div>
                    </div>
                </div>

                <!-- Total Income -->
                <div class="rounded-2xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-900 p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-400">Total Income</p>
                            <p class="text-4xl font-black text-white">${{ props.stats.total_income.toFixed(2) }}</p>
                        </div>
                        <div class="rounded-xl bg-green-500/10 p-3">
                            <DollarSign :size="28" class="text-green-400" />
                        </div>
                    </div>
                </div>

                <!-- Balance Due -->
                <div class="rounded-2xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-900 p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-slate-400">Balance Due</p>
                            <p :class="props.stats.balance >= 0 ? 'text-green-400' : 'text-red-400'" class="text-4xl font-black">
                                ${{ props.stats.balance.toFixed(2) }}
                            </p>
                        </div>
                        <div class="rounded-xl bg-purple-500/10 p-3">
                            <TrendingUp :size="28" class="text-purple-400" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-slate-700 bg-slate-800/50 p-8 backdrop-blur">
                <h3 class="text-xl font-black text-white mb-4">Quick Start</h3>
                <p class="text-slate-400 mb-6">Start by creating a new unlock order for your customers</p>
                <a href="route('shop.orders.create')" class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-3 font-bold text-white transition-all hover:shadow-lg">
                    Create New Order
                </a>
            </div>
        </div>
    </ShopLayout>
</template>
