@extends('layouts.admin')
@section('title', 'Historial — ' . $license->domain . ' — Admin')

@section('content')
    <div class="flex items-center gap-4 mb-8">
        <a href="{{ route('admin.licenses') }}" class="text-gray-500 hover:text-white transition">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold">📈 Historial de Scores</h1>
            <p class="text-gray-500 text-sm">{{ $license->domain }} · <code
                    class="text-xs">{{ $license->license_key }}</code></p>
        </div>
    </div>

    <!-- Chart -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 mb-6">
        <canvas id="scoreChart" height="80"></canvas>
    </div>

    <!-- History Table -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-800 text-xs text-gray-500 uppercase">
                    <th class="text-left p-4">Fecha</th>
                    <th class="text-center p-4">Seguridad</th>
                    <th class="text-center p-4">SEO</th>
                    <th class="text-center p-4">Rendimiento</th>
                    <th class="text-center p-4">Total</th>
                    <th class="text-center p-4">Hallazgos</th>
                    <th class="text-left p-4">Fuente</th>
                </tr>
            </thead>
            <tbody>
                @forelse($history as $entry)
                    <tr class="border-b border-gray-800/50 hover:bg-gray-800/30 transition">
                        <td class="p-4 text-gray-400">{{ $entry->created_at->format('d/m/Y H:i') }}</td>
                        <td class="p-4 text-center">
                            <span
                                class="font-bold {{ $entry->security_score >= 80 ? 'text-green-400' : ($entry->security_score >= 50 ? 'text-yellow-400' : 'text-red-400') }}">
                                {{ $entry->security_score }}
                            </span>
                        </td>
                        <td class="p-4 text-center">
                            <span
                                class="font-bold {{ $entry->seo_score >= 80 ? 'text-green-400' : ($entry->seo_score >= 50 ? 'text-yellow-400' : 'text-red-400') }}">
                                {{ $entry->seo_score }}
                            </span>
                        </td>
                        <td class="p-4 text-center">
                            <span
                                class="font-bold {{ $entry->performance_score >= 80 ? 'text-green-400' : ($entry->performance_score >= 50 ? 'text-yellow-400' : 'text-red-400') }}">
                                {{ $entry->performance_score }}
                            </span>
                        </td>
                        <td class="p-4 text-center">
                            <span
                                class="px-2 py-1 rounded font-bold text-lg {{ $entry->total_score >= 80 ? 'text-green-400' : ($entry->total_score >= 50 ? 'text-yellow-400' : 'text-red-400') }}">
                                {{ $entry->total_score }}
                            </span>
                        </td>
                        <td class="p-4 text-center text-gray-400">{{ $entry->findings_count }}</td>
                        <td class="p-4">
                            <span
                                class="px-2 py-0.5 rounded text-xs {{ $entry->scan_source === 'manual' ? 'bg-blue-500/20 text-blue-400' : 'bg-gray-500/20 text-gray-400' }}">
                                {{ $entry->scan_source }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="p-8 text-center text-gray-600">
                            Sin historial de escaneos
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <script>
        (function () {
            var history = @json($history->reverse()->values());
            if (!history.length) return;

            var labels = history.map(function (h) {
                return new Date(h.created_at).toLocaleDateString('es-DO', { month: 'short', day: 'numeric' });
            });

            new Chart(document.getElementById('scoreChart'), {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Total',
                            data: history.map(function (h) { return h.total_score; }),
                            borderColor: '#60a5fa',
                            backgroundColor: 'rgba(96,165,250,0.1)',
                            fill: true,
                            tension: 0.3,
                            borderWidth: 3,
                        },
                        {
                            label: 'Seguridad',
                            data: history.map(function (h) { return h.security_score; }),
                            borderColor: '#34d399',
                            tension: 0.3,
                            borderWidth: 1.5,
                            borderDash: [5, 5],
                        },
                        {
                            label: 'SEO',
                            data: history.map(function (h) { return h.seo_score; }),
                            borderColor: '#fbbf24',
                            tension: 0.3,
                            borderWidth: 1.5,
                            borderDash: [5, 5],
                        },
                        {
                            label: 'Rendimiento',
                            data: history.map(function (h) { return h.performance_score; }),
                            borderColor: '#a78bfa',
                            tension: 0.3,
                            borderWidth: 1.5,
                            borderDash: [5, 5],
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: { min: 0, max: 100, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#9ca3af' } },
                        x: { grid: { display: false }, ticks: { color: '#9ca3af' } }
                    },
                    plugins: {
                        legend: { labels: { color: '#d1d5db' } }
                    }
                }
            });
        })();
    </script>
@endsection