{{-- resources/views/filament/pages/auction-monitor.blade.php --}}
<x-filament-panels::page>
    {{-- Stats row --}}
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6 mb-6">
        @foreach ([
            ['label' => 'Active Auctions',  'value' => $this->stats['active_auctions']  ?? 0, 'color' => 'amber'],
            ['label' => 'Pending Offers',   'value' => $this->stats['pending_offers']   ?? 0, 'color' => 'blue'],
            ['label' => 'Accepted Today',   'value' => $this->stats['accepted_today']   ?? 0, 'color' => 'green'],
            ['label' => 'Expired Today',    'value' => $this->stats['expired_today']    ?? 0, 'color' => 'red'],
            ['label' => 'Cascaded Today',   'value' => $this->stats['cascaded_today']   ?? 0, 'color' => 'purple'],
            ['label' => 'Failed Today',     'value' => $this->stats['failed_today']     ?? 0, 'color' => 'red'],
        ] as $stat)
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm">
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $stat['label'] }}</p>
            <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">{{ $stat['value'] }}</p>
        </div>
        @endforeach
    </div>

    {{-- Tab switcher --}}
    <div class="mb-4 flex gap-2">
        @foreach (['active' => 'Active Auctions', 'history' => 'History', 'offers' => 'All Offers'] as $tab => $label)
        <button
            wire:click="changeTab('{{ $tab }}')"
            class="rounded-lg px-4 py-2 text-sm font-medium transition
                {{ $this->activeTab === $tab
                    ? 'bg-primary-600 text-white shadow'
                    : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:bg-gray-50' }}">
            {{ $label }}
        </button>
        @endforeach
    </div>

    {{ $this->table }}
</x-filament-panels::page>