@extends('layouts.app-sidebar')

@section('content')
<div class="space-y-6">

    <!-- =============================================== -->
    <!-- HEADER -->
    <!-- =============================================== -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-2xl lg:text-3xl font-bold text-db-text-primary">AI Race Insights</h1>
            <p class="text-db-text-secondary mt-1">Groq vs OpenAI vs Anthropic performance comparison</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.ai-insights') }}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-db-surface hover:bg-db-card-hover text-db-text-secondary hover:text-db-text-primary border border-db-border transition-colors text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Refresh
            </a>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- SUCCESS MESSAGE -->
    <!-- =============================================== -->
    @if(session('success'))
    <div class="bg-emerald-500/15 border border-emerald-500/25 rounded-xl p-4">
        <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <p class="text-emerald-400 text-sm font-medium">{{ session('success') }}</p>
        </div>
    </div>
    @endif

    <!-- =============================================== -->
    <!-- QUICK STATS CARDS (10m, 1h, 24h) -->
    <!-- =============================================== -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!-- Last 10 Minutes -->
        <div class="bg-db-card border border-db-border rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wide">Last 10 Minutes</h3>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/15 text-emerald-400 border border-emerald-500/25">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    Live
                </span>
            </div>
            <div class="text-3xl font-bold text-db-text-primary mb-3">{{ $stats10m['total_races'] }} races</div>
            <div class="flex items-center gap-3">
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-cyan-500"></div>
                        <span class="text-xs text-db-text-muted">Groq</span>
                    </div>
                    <div class="text-lg font-semibold text-cyan-400">{{ $stats10m['groq_wins'] ?? 0 }} <span class="text-sm font-normal text-db-text-muted">({{ $stats10m['groq_win_rate'] ?? 0 }}%)</span></div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
                        <span class="text-xs text-db-text-muted">OpenAI</span>
                    </div>
                    <div class="text-lg font-semibold text-emerald-400">{{ $stats10m['openai_wins'] }} <span class="text-sm font-normal text-db-text-muted">({{ $stats10m['openai_win_rate'] }}%)</span></div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-orange-500"></div>
                        <span class="text-xs text-db-text-muted">Anthropic</span>
                    </div>
                    <div class="text-lg font-semibold text-orange-400">{{ $stats10m['anthropic_wins'] }} <span class="text-sm font-normal text-db-text-muted">({{ $stats10m['anthropic_win_rate'] }}%)</span></div>
                </div>
            </div>
        </div>

        <!-- Last Hour -->
        <div class="bg-db-card border border-db-border rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wide">Last Hour</h3>
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-db-accent-primary/15 text-db-accent-primary border border-db-accent-primary/25">
                    1h
                </span>
            </div>
            <div class="text-3xl font-bold text-db-text-primary mb-3">{{ $stats1h['total_races'] }} races</div>
            <div class="flex items-center gap-3">
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-cyan-500"></div>
                        <span class="text-xs text-db-text-muted">Groq</span>
                    </div>
                    <div class="text-lg font-semibold text-cyan-400">{{ $stats1h['groq_wins'] ?? 0 }} <span class="text-sm font-normal text-db-text-muted">({{ $stats1h['groq_win_rate'] ?? 0 }}%)</span></div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
                        <span class="text-xs text-db-text-muted">OpenAI</span>
                    </div>
                    <div class="text-lg font-semibold text-emerald-400">{{ $stats1h['openai_wins'] }} <span class="text-sm font-normal text-db-text-muted">({{ $stats1h['openai_win_rate'] }}%)</span></div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-orange-500"></div>
                        <span class="text-xs text-db-text-muted">Anthropic</span>
                    </div>
                    <div class="text-lg font-semibold text-orange-400">{{ $stats1h['anthropic_wins'] }} <span class="text-sm font-normal text-db-text-muted">({{ $stats1h['anthropic_win_rate'] }}%)</span></div>
                </div>
            </div>
        </div>

        <!-- Last 24 Hours -->
        <div class="bg-db-card border border-db-border rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wide">Last 24 Hours</h3>
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-cyan-500/15 text-cyan-400 border border-cyan-500/25">
                    24h
                </span>
            </div>
            <div class="text-3xl font-bold text-db-text-primary mb-3">{{ $stats24h['total_races'] }} races</div>
            <div class="flex items-center gap-3">
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-cyan-500"></div>
                        <span class="text-xs text-db-text-muted">Groq</span>
                    </div>
                    <div class="text-lg font-semibold text-cyan-400">{{ $stats24h['groq_wins'] ?? 0 }} <span class="text-sm font-normal text-db-text-muted">({{ $stats24h['groq_win_rate'] ?? 0 }}%)</span></div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
                        <span class="text-xs text-db-text-muted">OpenAI</span>
                    </div>
                    <div class="text-lg font-semibold text-emerald-400">{{ $stats24h['openai_wins'] }} <span class="text-sm font-normal text-db-text-muted">({{ $stats24h['openai_win_rate'] }}%)</span></div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <div class="w-3 h-3 rounded-full bg-orange-500"></div>
                        <span class="text-xs text-db-text-muted">Anthropic</span>
                    </div>
                    <div class="text-lg font-semibold text-orange-400">{{ $stats24h['anthropic_wins'] }} <span class="text-sm font-normal text-db-text-muted">({{ $stats24h['anthropic_win_rate'] }}%)</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- GLOBAL COMPARISON (24h) -->
    <!-- =============================================== -->
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-6">Global Comparison (24h)</h3>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Groq Stats -->
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-cyan-500/15 flex items-center justify-center">
                        <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold text-cyan-400">Groq</h4>
                        <p class="text-xs text-db-text-muted">Llama 3.3 70B</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Wins</p>
                        <p class="text-xl font-bold text-db-text-primary">{{ $stats24h['groq_wins'] ?? 0 }}</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Win Rate</p>
                        <p class="text-xl font-bold text-cyan-400">{{ $stats24h['groq_win_rate'] ?? 0 }}%</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Avg Latency</p>
                        <p class="text-xl font-bold text-db-text-primary">{{ $stats24h['groq_avg_latency'] ?? '-' }}ms</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Errors</p>
                        <p class="text-xl font-bold {{ ($stats24h['groq_errors'] ?? 0) > 0 ? 'text-red-400' : 'text-db-text-primary' }}">{{ $stats24h['groq_errors'] ?? 0 }}</p>
                    </div>
                </div>
            </div>

            <!-- OpenAI Stats -->
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center">
                        <svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold text-emerald-400">OpenAI</h4>
                        <p class="text-xs text-db-text-muted">GPT-4o-mini</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Wins</p>
                        <p class="text-xl font-bold text-db-text-primary">{{ $stats24h['openai_wins'] }}</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Win Rate</p>
                        <p class="text-xl font-bold text-emerald-400">{{ $stats24h['openai_win_rate'] }}%</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Avg Latency</p>
                        <p class="text-xl font-bold text-db-text-primary">{{ $stats24h['openai_avg_latency'] ?? '-' }}ms</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Errors</p>
                        <p class="text-xl font-bold {{ $stats24h['openai_errors'] > 0 ? 'text-red-400' : 'text-db-text-primary' }}">{{ $stats24h['openai_errors'] }}</p>
                    </div>
                </div>
            </div>

            <!-- Anthropic Stats -->
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-orange-500/15 flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold text-orange-400">Anthropic</h4>
                        <p class="text-xs text-db-text-muted">Claude 3.5 Haiku</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Wins</p>
                        <p class="text-xl font-bold text-db-text-primary">{{ $stats24h['anthropic_wins'] }}</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Win Rate</p>
                        <p class="text-xl font-bold text-orange-400">{{ $stats24h['anthropic_win_rate'] }}%</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Avg Latency</p>
                        <p class="text-xl font-bold text-db-text-primary">{{ $stats24h['anthropic_avg_latency'] ?? '-' }}ms</p>
                    </div>
                    <div class="bg-db-surface rounded-lg p-3">
                        <p class="text-xs text-db-text-muted mb-1">Errors</p>
                        <p class="text-xl font-bold {{ $stats24h['anthropic_errors'] > 0 ? 'text-red-400' : 'text-db-text-primary' }}">{{ $stats24h['anthropic_errors'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Win Rate Bar -->
        @if($stats24h['total_races'] > 0)
        <div class="mt-6 pt-6 border-t border-db-border">
            <p class="text-xs text-db-text-muted mb-2">Overall Win Distribution</p>
            <div class="h-4 rounded-full overflow-hidden bg-db-surface flex">
                <div class="bg-cyan-500 transition-all" style="width: {{ $stats24h['groq_win_rate'] ?? 0 }}%"></div>
                <div class="bg-emerald-500 transition-all" style="width: {{ $stats24h['openai_win_rate'] }}%"></div>
                <div class="bg-orange-500 transition-all" style="width: {{ $stats24h['anthropic_win_rate'] }}%"></div>
            </div>
            <div class="flex justify-between mt-2 text-xs text-db-text-muted">
                <span class="text-cyan-400">Groq {{ $stats24h['groq_win_rate'] ?? 0 }}%</span>
                <span class="text-emerald-400">OpenAI {{ $stats24h['openai_win_rate'] }}%</span>
                <span class="text-orange-400">Anthropic {{ $stats24h['anthropic_win_rate'] }}%</span>
            </div>
        </div>
        @endif
    </div>

    <!-- =============================================== -->
    <!-- ANTHROPIC SPEED BOOSTER METRICS -->
    <!-- =============================================== -->
    @if(isset($anthropicMetrics))
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Anthropic Speed Booster</h3>
            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-orange-500/15 text-orange-400 border border-orange-500/25">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                Optimized
            </span>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <!-- Avg Latency 24h -->
            <div class="bg-db-surface rounded-lg p-4">
                <p class="text-xs text-db-text-muted mb-1">Avg Latency (24h)</p>
                <p class="text-2xl font-bold {{ ($anthropicMetrics['avg_latency_24h_ms'] ?? 0) < 2000 ? 'text-emerald-400' : 'text-orange-400' }}">
                    {{ $anthropicMetrics['avg_latency_24h_ms'] ?? '-' }}<span class="text-sm font-normal text-db-text-muted">ms</span>
                </p>
            </div>

            <!-- Avg Latency 1h -->
            <div class="bg-db-surface rounded-lg p-4">
                <p class="text-xs text-db-text-muted mb-1">Avg Latency (1h)</p>
                <p class="text-2xl font-bold {{ ($anthropicMetrics['avg_latency_1h_ms'] ?? 0) < 2000 ? 'text-emerald-400' : 'text-orange-400' }}">
                    {{ $anthropicMetrics['avg_latency_1h_ms'] ?? '-' }}<span class="text-sm font-normal text-db-text-muted">ms</span>
                </p>
            </div>

            <!-- Errors 24h -->
            <div class="bg-db-surface rounded-lg p-4">
                <p class="text-xs text-db-text-muted mb-1">Errors (24h)</p>
                <p class="text-2xl font-bold {{ ($anthropicMetrics['error_count_24h'] ?? 0) > 0 ? 'text-red-400' : 'text-emerald-400' }}">
                    {{ $anthropicMetrics['error_count_24h'] ?? 0 }}
                </p>
            </div>

            <!-- Win Rate -->
            <div class="bg-db-surface rounded-lg p-4">
                <p class="text-xs text-db-text-muted mb-1">Win Rate (24h)</p>
                <p class="text-2xl font-bold text-orange-400">
                    {{ $anthropicMetrics['win_rate_24h'] ?? 0 }}<span class="text-sm font-normal text-db-text-muted">%</span>
                </p>
            </div>
        </div>

        <!-- Latency Comparison -->
        @if($anthropicMetrics['avg_latency_24h_ms'] && $anthropicMetrics['openai_avg_latency_24h_ms'])
        <div class="mt-4 pt-4 border-t border-db-border">
            <p class="text-xs text-db-text-muted mb-2">Latency Comparison (24h avg)</p>
            <div class="flex items-center gap-4">
                <div class="flex-1">
                    <div class="flex items-center justify-between text-sm mb-1">
                        <span class="text-emerald-400">OpenAI</span>
                        <span class="text-db-text-secondary">{{ $anthropicMetrics['openai_avg_latency_24h_ms'] }}ms</span>
                    </div>
                    <div class="h-2 rounded-full bg-db-surface overflow-hidden">
                        @php
                            $maxLatency = max($anthropicMetrics['openai_avg_latency_24h_ms'], $anthropicMetrics['avg_latency_24h_ms']);
                            $openaiWidth = ($anthropicMetrics['openai_avg_latency_24h_ms'] / $maxLatency) * 100;
                        @endphp
                        <div class="h-full bg-emerald-500 transition-all" style="width: {{ $openaiWidth }}%"></div>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between text-sm mb-1">
                        <span class="text-orange-400">Anthropic</span>
                        <span class="text-db-text-secondary">{{ $anthropicMetrics['avg_latency_24h_ms'] }}ms</span>
                    </div>
                    <div class="h-2 rounded-full bg-db-surface overflow-hidden">
                        @php
                            $anthropicWidth = ($anthropicMetrics['avg_latency_24h_ms'] / $maxLatency) * 100;
                        @endphp
                        <div class="h-full bg-orange-500 transition-all" style="width: {{ $anthropicWidth }}%"></div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
    @endif

    <!-- =============================================== -->
    <!-- RESPONSE CACHE STATS -->
    <!-- =============================================== -->
    @if(isset($cacheStats))
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Response Cache</h3>
            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-cyan-500/15 text-cyan-400 border border-cyan-500/25">
                Micro-cache
            </span>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="bg-db-surface rounded-lg p-3">
                <p class="text-xs text-db-text-muted mb-1">Cached Entries</p>
                <p class="text-lg font-bold text-db-text-primary">{{ $cacheStats['entries'] }} <span class="text-sm font-normal text-db-text-muted">/ {{ $cacheStats['max_entries'] }}</span></p>
            </div>
            <div class="bg-db-surface rounded-lg p-3">
                <p class="text-xs text-db-text-muted mb-1">TTL</p>
                <p class="text-lg font-bold text-db-text-primary">{{ round($cacheStats['ttl_seconds'] / 60) }} <span class="text-sm font-normal text-db-text-muted">min</span></p>
            </div>
            <div class="bg-db-surface rounded-lg p-3">
                <p class="text-xs text-db-text-muted mb-1">Oldest Entry</p>
                <p class="text-lg font-bold text-db-text-primary">{{ $cacheStats['oldest_age_seconds'] }} <span class="text-sm font-normal text-db-text-muted">sec</span></p>
            </div>
            <div class="bg-db-surface rounded-lg p-3">
                <p class="text-xs text-db-text-muted mb-1">Newest Entry</p>
                <p class="text-lg font-bold text-db-text-primary">{{ $cacheStats['newest_age_seconds'] }} <span class="text-sm font-normal text-db-text-muted">sec</span></p>
            </div>
        </div>
    </div>
    @endif

    <!-- =============================================== -->
    <!-- HOURLY CHART -->
    <!-- =============================================== -->
    @if(count($hourlyData) > 0)
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-4">Hourly Distribution (24h)</h3>
        <div class="h-64">
            <canvas id="hourlyChart"></canvas>
        </div>
    </div>
    @endif

    <!-- =============================================== -->
    <!-- PER-TENANT STATS TABLE -->
    <!-- =============================================== -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Per-Tenant Statistics (24h)</h3>
            <span class="text-xs text-db-text-muted bg-db-surface px-2 py-1 rounded-lg">{{ count($tenantStats) }} tenants</span>
        </div>

        <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-db-border bg-db-surface/50">
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Channel</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Races</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">
                                <span class="text-emerald-400">OpenAI</span>
                            </th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">
                                <span class="text-orange-400">Anthropic</span>
                            </th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden lg:table-cell">OpenAI Latency</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden lg:table-cell">Anthropic Latency</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden md:table-cell">Errors</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-db-border">
                        @forelse($tenantStats as $stat)
                        <tr class="hover:bg-db-surface/30 transition-colors">
                            <td class="px-5 py-4">
                                <p class="text-sm font-semibold text-db-text-primary">{{ $stat['channel_title'] }}</p>
                            </td>
                            <td class="px-5 py-4">
                                <span class="text-sm font-medium text-db-text-primary">{{ $stat['total_races'] }}</span>
                            </td>
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium text-emerald-400">{{ $stat['openai_wins'] }}</span>
                                    <span class="text-xs text-db-text-muted">({{ $stat['openai_win_rate'] }}%)</span>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium text-orange-400">{{ $stat['anthropic_wins'] }}</span>
                                    <span class="text-xs text-db-text-muted">({{ $stat['anthropic_win_rate'] }}%)</span>
                                </div>
                            </td>
                            <td class="px-5 py-4 hidden lg:table-cell">
                                <span class="text-sm text-db-text-secondary">{{ $stat['avg_openai_latency'] ?? '-' }}ms</span>
                            </td>
                            <td class="px-5 py-4 hidden lg:table-cell">
                                <span class="text-sm text-db-text-secondary">{{ $stat['avg_anthropic_latency'] ?? '-' }}ms</span>
                            </td>
                            <td class="px-5 py-4 hidden md:table-cell">
                                @if(($stat['openai_errors'] + $stat['anthropic_errors']) > 0)
                                <span class="text-sm text-red-400 font-medium">{{ $stat['openai_errors'] + $stat['anthropic_errors'] }}</span>
                                @else
                                <span class="text-sm text-db-text-muted">0</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-5 py-16 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 rounded-2xl bg-db-surface flex items-center justify-center mb-4">
                                        <svg class="w-8 h-8 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                        </svg>
                                    </div>
                                    <p class="text-db-text-muted">No race data available yet</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- RECENT RACES TABLE -->
    <!-- =============================================== -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Recent Races</h3>
            <span class="text-xs text-db-text-muted bg-db-surface px-2 py-1 rounded-lg">Last 20</span>
        </div>

        <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-db-border bg-db-surface/50">
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Time</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Channel</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Winner</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden md:table-cell">Groq</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden md:table-cell">OpenAI</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden md:table-cell">Anthropic</th>
                            <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider hidden lg:table-cell">Message</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-db-border">
                        @forelse($recentRaces as $race)
                        <tr class="hover:bg-db-surface/30 transition-colors">
                            <td class="px-5 py-4">
                                <span class="text-sm text-db-text-muted">{{ $race->created_at->diffForHumans() }}</span>
                            </td>
                            <td class="px-5 py-4">
                                <p class="text-sm font-medium text-db-text-primary">{{ $race->tenant?->channel_title ?? 'Unknown' }}</p>
                            </td>
                            <td class="px-5 py-4">
                                @if($race->provider_winner === 'groq')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-cyan-500/15 text-cyan-400 border border-cyan-500/25">
                                    Groq
                                </span>
                                @elseif($race->provider_winner === 'openai')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/15 text-emerald-400 border border-emerald-500/25">
                                    OpenAI
                                </span>
                                @elseif($race->provider_winner === 'anthropic')
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-orange-500/15 text-orange-400 border border-orange-500/25">
                                    Anthropic
                                </span>
                                @else
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-db-surface text-db-text-muted border border-db-border">
                                    None
                                </span>
                                @endif
                            </td>
                            <td class="px-5 py-4 hidden md:table-cell">
                                @if($race->groq_error)
                                <span class="text-sm text-red-400">Error</span>
                                @elseif($race->groq_latency_ms)
                                <span class="text-sm text-cyan-400">{{ $race->groq_latency_ms }}ms</span>
                                @else
                                <span class="text-sm text-db-text-muted">-</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 hidden md:table-cell">
                                @if($race->openai_error)
                                <span class="text-sm text-red-400">Error</span>
                                @elseif($race->openai_latency_ms)
                                <span class="text-sm text-db-text-secondary">{{ $race->openai_latency_ms }}ms</span>
                                @else
                                <span class="text-sm text-db-text-muted">-</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 hidden md:table-cell">
                                @if($race->anthropic_error)
                                <span class="text-sm text-red-400">Error</span>
                                @elseif($race->anthropic_latency_ms)
                                <span class="text-sm text-db-text-secondary">{{ $race->anthropic_latency_ms }}ms</span>
                                @else
                                <span class="text-sm text-db-text-muted">-</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 hidden lg:table-cell">
                                <p class="text-sm text-db-text-muted truncate max-w-xs">{{ $race->user_message_preview ?? '-' }}</p>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-5 py-16 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 rounded-2xl bg-db-surface flex items-center justify-center mb-4">
                                        <svg class="w-8 h-8 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                        </svg>
                                    </div>
                                    <p class="text-db-text-muted">No races recorded yet</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- =============================================== -->
    <!-- PURGE OLD STATS -->
    <!-- =============================================== -->
    <div class="bg-db-card border border-db-border rounded-xl p-6">
        <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-4">Data Management</h3>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <p class="text-sm text-db-text-secondary">Purge old race statistics to free up database space.</p>
                <p class="text-xs text-db-text-muted mt-1">This action cannot be undone.</p>
            </div>
            <form action="{{ route('admin.ai-insights.purge') }}" method="POST" class="flex items-center gap-3" onsubmit="return confirm('Are you sure you want to purge old stats?');">
                @csrf
                <select name="days" class="rounded-lg bg-db-surface border border-db-border text-db-text-primary text-sm px-3 py-2 focus:ring-2 focus:ring-db-accent-primary focus:border-transparent">
                    <option value="7">Older than 7 days</option>
                    <option value="14">Older than 14 days</option>
                    <option value="30" selected>Older than 30 days</option>
                    <option value="60">Older than 60 days</option>
                    <option value="90">Older than 90 days</option>
                </select>
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/15 text-red-400 hover:bg-red-500/25 border border-red-500/25 transition-colors text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    Purge Stats
                </button>
            </form>
        </div>
    </div>

</div>

@if(count($hourlyData) > 0)
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('hourlyChart');
    if (ctx) {
        const chartColors = {
            groq: 'rgb(6, 182, 212)',
            groqBg: 'rgba(6, 182, 212, 0.2)',
            openai: 'rgb(16, 185, 129)',
            openaiBg: 'rgba(16, 185, 129, 0.2)',
            anthropic: 'rgb(249, 115, 22)',
            anthropicBg: 'rgba(249, 115, 22, 0.2)',
            grid: 'rgba(255, 255, 255, 0.05)',
            text: 'rgba(255, 255, 255, 0.5)'
        };

        new Chart(ctx.getContext('2d'), {
            type: 'line',
            data: {
                labels: {!! json_encode(array_column($hourlyData, 'hour')) !!}.map(h => {
                    const date = new Date(h);
                    return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
                }),
                datasets: [{
                    label: 'Groq Wins',
                    data: {!! json_encode(array_column($hourlyData, 'groq_wins')) !!},
                    borderColor: chartColors.groq,
                    backgroundColor: chartColors.groqBg,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }, {
                    label: 'OpenAI Wins',
                    data: {!! json_encode(array_column($hourlyData, 'openai_wins')) !!},
                    borderColor: chartColors.openai,
                    backgroundColor: chartColors.openaiBg,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }, {
                    label: 'Anthropic Wins',
                    data: {!! json_encode(array_column($hourlyData, 'anthropic_wins')) !!},
                    borderColor: chartColors.anthropic,
                    backgroundColor: chartColors.anthropicBg,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            color: chartColors.text,
                            usePointStyle: true,
                            padding: 20
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: chartColors.grid },
                        ticks: { color: chartColors.text, maxRotation: 45 }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: chartColors.grid },
                        ticks: { color: chartColors.text, stepSize: 1 }
                    }
                }
            }
        });
    }
});
</script>
@endpush
@endif
@endsection