@props(['statistics'])

<div class="bg-white dark:bg-brand-charcoal-900 border border-slate-200 dark:border-brand-charcoal-800 rounded-xl p-6 shadow-sm select-none">
    <div class="mb-4">
        <h5 class="text-base font-semibold text-slate-800 dark:text-brand-charcoal-100 font-serif">Business Overview</h5>
        <h6 class="text-xs text-slate-450 dark:text-brand-charcoal-400 mt-0.5 font-medium">Key performance indicators</h6>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Invoices -->
        <div class="text-center p-4 bg-slate-50 dark:bg-brand-charcoal-950/80 border border-slate-100 dark:border-brand-charcoal-800 rounded-xl flex flex-col items-center justify-center">
            <div class="h-10 w-10 rounded-full bg-slate-100 dark:bg-brand-charcoal-900 flex items-center justify-center mb-2.5">
                <i class="uil uil-invoice text-slate-500 dark:text-brand-charcoal-350 text-xl"></i>
            </div>
            <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ $statistics['total_invoices'] ?? 0 }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-1">Total Invoices</p>
        </div>

        <!-- Revenue -->
        <div class="text-center p-4 bg-emerald-50/70 dark:bg-brand-emerald-950/20 border border-emerald-100 dark:border-brand-emerald-500/10 rounded-xl flex flex-col items-center justify-center">
            <div class="h-10 w-10 rounded-full bg-emerald-100/50 dark:bg-brand-emerald-950/40 border border-emerald-200/20 dark:border-brand-emerald-500/10 flex items-center justify-center mb-2.5">
                <i class="uil uil-usd-circle text-emerald-600 dark:text-brand-emerald-400 text-xl"></i>
            </div>
            <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif">${{ number_format($statistics['total_revenue'] ?? 0, 0) }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-emerald-700 dark:text-brand-emerald-400 uppercase mt-1">Total Revenue</p>
        </div>

        <!-- Pending -->
        <div class="text-center p-4 bg-amber-50/70 dark:bg-amber-950/10 border border-amber-100 dark:border-amber-500/10 rounded-xl flex flex-col items-center justify-center">
            <div class="h-10 w-10 rounded-full bg-amber-100/50 dark:bg-amber-950/30 border border-amber-200/20 dark:border-amber-500/10 flex items-center justify-center mb-2.5">
                <i class="uil uil-clock text-amber-600 dark:text-amber-400 text-xl"></i>
            </div>
            <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ $statistics['pending_orders'] ?? 0 }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-amber-700 dark:text-amber-400 uppercase mt-1">Pending Orders</p>
        </div>

        <!-- Completed -->
        <div class="text-center p-4 bg-blue-50/70 dark:bg-blue-950/10 border border-blue-100 dark:border-blue-500/10 rounded-xl flex flex-col items-center justify-center">
            <div class="h-10 w-10 rounded-full bg-blue-100/50 dark:bg-blue-950/30 border border-blue-200/20 dark:border-blue-500/10 flex items-center justify-center mb-2.5">
                <i class="uil uil-check-circle text-blue-600 dark:text-blue-400 text-xl"></i>
            </div>
            <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ $statistics['completed_orders'] ?? 0 }}</h4>
            <p class="text-[10px] font-bold tracking-widest text-blue-700 dark:text-blue-400 uppercase mt-1">Completed</p>
        </div>
    </div>

    <div class="border-t border-slate-200 dark:border-brand-charcoal-800 my-5"></div>

    <div class="grid grid-cols-2 gap-6">
        <div class="flex items-center justify-between p-3 bg-slate-50 dark:bg-brand-charcoal-950/30 rounded-xl border border-slate-100 dark:border-brand-charcoal-800/40">
            <div>
                <h5 class="text-lg font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif">${{ number_format($statistics['average_order_value'] ?? 0, 2) }}</h5>
                <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-0.5">Average Order Value</p>
            </div>
            <div class="h-8 w-8 rounded-lg bg-blue-100/60 dark:bg-blue-950/20 flex items-center justify-center">
                <i class="uil uil-chart-line text-blue-600 dark:text-blue-400 text-lg"></i>
            </div>
        </div>

        <div class="flex items-center justify-between p-3 bg-slate-50 dark:bg-brand-charcoal-950/30 rounded-xl border border-slate-100 dark:border-brand-charcoal-800/40">
            <div>
                <h5 class="text-lg font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ number_format($statistics['success_rate'] ?? 0, 1) }}%</h5>
                <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-0.5">Success Rate</p>
            </div>
            <div class="h-8 w-8 rounded-lg bg-emerald-100/60 dark:bg-brand-emerald-950/20 flex items-center justify-center">
                <i class="uil uil-percentage text-emerald-650 dark:text-brand-emerald-400 text-lg"></i>
            </div>
        </div>
    </div>

    <div class="mt-5 space-y-2">
        <div class="w-full bg-slate-100 dark:bg-brand-charcoal-950 border border-slate-200 dark:border-brand-charcoal-800/50 rounded-full h-2 overflow-hidden">
            <div class="bg-brand-emerald-500 h-2 rounded-full transition-all duration-500" 
                 style="width: {{ $statistics['success_rate'] ?? 0 }}%">
            </div>
        </div>
        <div class="flex items-center justify-between text-[10px] font-bold tracking-widest text-slate-450 dark:text-brand-charcoal-400 uppercase">
            <span>Overall completion rate</span>
            <span class="text-emerald-600 dark:text-brand-emerald-400">{{ number_format($statistics['success_rate'] ?? 0, 1) }}%</span>
        </div>
    </div>
</div>