@props(['data', 'period' => 'daily'])

<div class="bg-white dark:bg-brand-charcoal-900 border border-slate-200 dark:border-brand-charcoal-800 rounded-xl p-5 shadow-sm dashboard-widget select-none" data-period="{{ $period }}">
    <div class="mb-4 flex items-center justify-between">
        <div>
            <h5 class="text-base font-semibold text-slate-800 dark:text-brand-charcoal-100 font-serif">{{ $data['period'] ?? 'Summary' }}</h5>
            <h6 class="text-xs text-slate-450 dark:text-brand-charcoal-400 mt-0.5 font-medium">{{ $data['date_range'] ?? 'Recent' }}</h6>
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <!-- Total Invoices -->
        <div class="flex items-center">
            <div class="flex-1">
                <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif widget-value" id="total-invoices-{{ $period }}">
                    {{ $data['current']['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>
                @if(isset($data['comparison']['total_invoices']))
                    @php
                        $tTrend = $data['comparison']['total_invoices']['trend'];
                        $tClass = $tTrend === 'up' ? 'bg-emerald-50 text-emerald-700 border-emerald-250 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20' : ($tTrend === 'down' ? 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20' : 'bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-800/40 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800');
                        $tIcon = $tTrend === 'up' ? 'uil uil-arrow-grow' : ($tTrend === 'down' ? 'uil uil-arrow-down-left' : 'uil uil-minus');
                    @endphp
                    <span class="inline-flex items-center px-1.5 py-0.5 mt-1.5 rounded-full text-[10px] font-semibold leading-3 border {{ $tClass }}">
                        <i class="{{ $tIcon }} me-0.5"></i>{{ abs($data['comparison']['total_invoices']['percentage']) }}%
                    </span>
                @endif
            </div>
        </div>

        <!-- Total Revenue -->
        <div class="flex items-center">
            <div class="flex-1">
                <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif widget-value" id="total-revenue-{{ $period }}">
                    ${{ number_format($data['current']['total_revenue'] ?? 0, 2) }}
                </h4>
                <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-1">Total Revenue</p>
                @if(isset($data['comparison']['total_revenue']))
                    @php
                        $rTrend = $data['comparison']['total_revenue']['trend'];
                        $rClass = $rTrend === 'up' ? 'bg-emerald-50 text-emerald-700 border-emerald-250 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20' : ($rTrend === 'down' ? 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20' : 'bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-800/40 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800');
                        $rIcon = $rTrend === 'up' ? 'uil uil-arrow-grow' : ($rTrend === 'down' ? 'uil uil-arrow-down-left' : 'uil uil-minus');
                    @endphp
                    <span class="inline-flex items-center px-1.5 py-0.5 mt-1.5 rounded-full text-[10px] font-semibold leading-3 border {{ $rClass }}">
                        <i class="{{ $rIcon }} me-0.5"></i>{{ abs($data['comparison']['total_revenue']['percentage']) }}%
                    </span>
                @endif
            </div>
        </div>

        <!-- Paid Invoices -->
        <div class="flex items-center col-span-2 md:col-span-1">
            <div class="flex-1">
                <h4 class="text-xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif widget-value" id="paid-invoices-{{ $period }}">
                    {{ $data['current']['paid_invoices'] ?? 0 }}
                </h4>
                <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-1">Paid Invoices</p>
                @if(isset($data['comparison']['paid_invoices']))
                    @php
                        $pTrend = $data['comparison']['paid_invoices']['trend'];
                        $pClass = $pTrend === 'up' ? 'bg-emerald-50 text-emerald-700 border-emerald-250 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20' : ($pTrend === 'down' ? 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20' : 'bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-800/40 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800');
                        $pIcon = $pTrend === 'up' ? 'uil uil-arrow-grow' : ($pTrend === 'down' ? 'uil uil-arrow-down-left' : 'uil uil-minus');
                    @endphp
                    <span class="inline-flex items-center px-1.5 py-0.5 mt-1.5 rounded-full text-[10px] font-semibold leading-3 border {{ $pClass }}">
                        <i class="{{ $pIcon }} me-0.5"></i>{{ abs($data['comparison']['paid_invoices']['percentage']) }}%
                    </span>
                @endif
            </div>
        </div>
    </div>

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

    <div class="grid grid-cols-2 gap-4 text-center">
        <div class="p-3 bg-slate-50 dark:bg-brand-charcoal-950/40 border border-slate-100 dark:border-brand-charcoal-800/60 rounded-xl">
            <h6 class="text-sm font-bold text-slate-800 dark:text-brand-charcoal-100">{{ $data['current']['pending_invoices'] ?? 0 }}</h6>
            <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-0.5 leading-none">Pending</p>
        </div>
        <div class="p-3 bg-slate-50 dark:bg-brand-charcoal-950/40 border border-slate-100 dark:border-brand-charcoal-800/60 rounded-xl">
            <h6 class="text-sm font-bold text-slate-800 dark:text-brand-charcoal-100">${{ number_format($data['current']['average_order_value'] ?? 0, 2) }}</h6>
            <p class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mt-0.5 leading-none">Avg Order</p>
        </div>
    </div>
</div>