@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 Stats Debug</h1>
            <p class="text-db-text-secondary mt-1">Raw database entries for debugging</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">
                Back to Dashboard
            </a>
            <a href="{{ route('admin.ai-insights.debug') }}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-db-accent-primary text-white 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>

    <!-- Counts Summary -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-db-card border border-db-border rounded-xl p-4">
            <p class="text-xs text-db-text-muted uppercase mb-1">Total in DB</p>
            <p class="text-2xl font-bold text-db-text-primary">{{ $totalCount }}</p>
        </div>
        <div class="bg-db-card border border-db-border rounded-xl p-4">
            <p class="text-xs text-db-text-muted uppercase mb-1">Last 24h</p>
            <p class="text-2xl font-bold text-db-text-primary">{{ $count24h }}</p>
        </div>
        <div class="bg-db-card border border-db-border rounded-xl p-4">
            <p class="text-xs text-db-text-muted uppercase mb-1">Last 1h</p>
            <p class="text-2xl font-bold text-db-text-primary">{{ $count1h }}</p>
        </div>
        <div class="bg-db-card border border-db-border rounded-xl p-4">
            <p class="text-xs text-db-text-muted uppercase mb-1">Last 10m</p>
            <p class="text-2xl font-bold text-db-text-primary">{{ $count10m }}</p>
        </div>
    </div>

    <!-- Raw Data Table -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="p-4 border-b border-db-border">
            <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider">Last 20 Raw Entries</h3>
        </div>

        @if($stats->isEmpty())
        <div class="p-8 text-center">
            <div class="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <p class="text-db-text-primary font-semibold mb-1">No records found!</p>
            <p class="text-db-text-muted text-sm">The ai_race_stats table is empty. This means:</p>
            <ul class="text-db-text-muted text-sm mt-2 text-left max-w-md mx-auto">
                <li>- Either no AI races have occurred yet</li>
                <li>- Or the insert is failing silently</li>
                <li>- Check laravel.log for AI_RACE_STAT_INSERT logs</li>
            </ul>
        </div>
        @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-db-surface/50">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">Created At</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">Tenant ID</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">Winner</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">OpenAI ms</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">Anthropic ms</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">OAI Err</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">ANT Err</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-db-text-muted uppercase">Message</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-db-border">
                    @foreach($stats as $stat)
                    <tr class="hover:bg-db-surface/30">
                        <td class="px-4 py-3 text-db-text-primary font-mono">{{ $stat->id }}</td>
                        <td class="px-4 py-3 text-db-text-secondary">{{ $stat->created_at->format('Y-m-d H:i:s') }}</td>
                        <td class="px-4 py-3 text-db-text-secondary">{{ $stat->tenant_id ?? '-' }}</td>
                        <td class="px-4 py-3">
                            @if($stat->provider_winner === 'openai')
                            <span class="px-2 py-1 rounded text-xs font-semibold bg-emerald-500/15 text-emerald-400">openai</span>
                            @elseif($stat->provider_winner === 'anthropic')
                            <span class="px-2 py-1 rounded text-xs font-semibold bg-orange-500/15 text-orange-400">anthropic</span>
                            @else
                            <span class="px-2 py-1 rounded text-xs font-semibold bg-red-500/15 text-red-400">none</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-db-text-secondary font-mono">{{ $stat->openai_latency_ms ?? '-' }}</td>
                        <td class="px-4 py-3 text-db-text-secondary font-mono">{{ $stat->anthropic_latency_ms ?? '-' }}</td>
                        <td class="px-4 py-3">
                            @if($stat->openai_error)
                            <span class="text-red-400">Yes</span>
                            @else
                            <span class="text-db-text-muted">No</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($stat->anthropic_error)
                            <span class="text-red-400">Yes</span>
                            @else
                            <span class="text-db-text-muted">No</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-db-text-muted truncate max-w-xs">{{ $stat->user_message_preview ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>

    <!-- Debug Info -->
    <div class="bg-db-card border border-db-border rounded-xl p-4">
        <h3 class="text-sm font-semibold text-db-text-muted uppercase tracking-wider mb-3">Debug Info</h3>
        <div class="text-sm text-db-text-secondary space-y-1 font-mono">
            <p>Table: ai_race_stats</p>
            <p>Model: App\Models\AiRaceStat</p>
            <p>Server Time: {{ now()->format('Y-m-d H:i:s T') }}</p>
            <p>Timezone: {{ config('app.timezone') }}</p>
        </div>
    </div>

</div>
@endsection