@props(['stores'])

<div class="glass-card-strong relative overflow-hidden rounded-3xl">
    <!-- Decorative orb -->
    <div class="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-blue-400/15 blur-3xl"></div>

    <div class="relative border-b border-white/40 bg-white/30 px-6 py-5 backdrop-blur-xl">
        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 shadow-lg shadow-emerald-500/25 ring-1 ring-white/30">
                    <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 22V12h6v10"></path>
                    </svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold tracking-tight text-zinc-900">Store Performance</h2>
                    <p class="mt-0.5 text-xs text-zinc-600">Ranked by highest revenue this week</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span class="inline-flex items-center gap-1.5 rounded-full bg-white/60 px-3 py-1 text-xs font-semibold text-zinc-700 ring-1 ring-inset ring-white/60 backdrop-blur-sm">
                    <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
                    {{ count($stores) }} {{ count($stores) === 1 ? 'Store' : 'Stores' }}
                </span>
            </div>
        </div>
    </div>

    <div class="relative overflow-x-auto">
        <table class="min-w-full divide-y divide-white/40">
            <thead class="bg-white/40 backdrop-blur-xl">
                <tr>
                    <th scope="col" class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        <div class="flex items-center gap-1">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                            </svg>
                            Store Name
                        </div>
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        Tax Exclusive
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        Total Tax
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        Total Inclusive
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        Transactions
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        Daily Avg
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        Avg. Basket
                    </th>
                    <th scope="col" class="px-6 py-4 text-right text-xs font-semibold uppercase tracking-wider text-zinc-700">
                        % of Total
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/30 bg-white/40 backdrop-blur-xl">
                @forelse ($stores as $index => $store)
                    <tr class="transition-colors hover:bg-white/60">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-3">
                                @php
                                    $rankClasses = match($index) {
                                        0 => 'bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-md shadow-amber-500/30',
                                        1 => 'bg-gradient-to-br from-zinc-300 to-zinc-400 text-white shadow-md shadow-zinc-400/30',
                                        2 => 'bg-gradient-to-br from-orange-600 to-amber-700 text-white shadow-md shadow-orange-600/30',
                                        default => 'bg-white/70 text-zinc-700 ring-1 ring-zinc-200/60 backdrop-blur-sm',
                                    };
                                @endphp
                                <div class="flex h-8 w-8 items-center justify-center rounded-xl text-xs font-bold {{ $rankClasses }}">
                                    {{ $index + 1 }}
                                </div>
                                <div class="text-sm font-semibold text-zinc-900">
                                    {{ $store['store_name'] }}
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="text-sm text-zinc-600">
                                K{{ number_format($store['total_before_tax'], 2) }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="text-sm text-zinc-600">
                                K{{ number_format($store['total_tax'], 2) }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="text-sm font-semibold text-zinc-900">
                                K{{ number_format($store['total_after_tax'], 2) }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="text-sm text-zinc-900">
                                {{ number_format($store['total_transactions'], 0) }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">
                                K{{ number_format($store['average_total_sale'], 2) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="text-sm font-semibold text-zinc-900">
                                K{{ number_format($store['avg_basket_value'], 2) }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="h-2 w-16 overflow-hidden rounded-full bg-zinc-100">
                                    <div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all" style="width: {{ number_format($store['percentage_of_total'], 1) }}%"></div>
                                </div>
                                <span class="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">
                                    {{ number_format($store['percentage_of_total'], 1) }}%
                                </span>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center justify-center text-zinc-500">
                                <div class="mb-4 rounded-full bg-zinc-100 p-4">
                                    <svg class="h-12 w-12 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                </div>
                                <p class="text-base font-semibold text-zinc-900">No store data available</p>
                                <p class="mt-2 text-sm text-zinc-600">Store performance will appear here once transactions are synced</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>