@extends('layouts.public')
@section('title', 'Resultados del Análisis — Olorun WebSec Analyzer')

@section('content')
    <div class="max-w-5xl mx-auto px-4 py-12">
        <!-- Loading -->
        <div id="loading" class="text-center py-20">
            <i class="fas fa-spinner fa-spin text-4xl text-brand-400 mb-4"></i>
            <p class="text-gray-400">Cargando resultados...</p>
        </div>

        <!-- Results -->
        <div id="results" class="hidden space-y-8 slide-up">
            <!-- Header with Grade -->
            <div class="text-center mb-6">
                <h1 class="text-3xl font-bold mb-2">Resultados del análisis</h1>
                <p id="result-domain" class="text-gray-400 text-lg"></p>
            </div>

            <!-- Main Grade Card -->
            <div class="glass rounded-3xl p-8 text-center glow relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-brand-600/5 to-accent-600/5"></div>
                <div class="relative z-10">
                    <p class="text-sm text-gray-400 mb-2">Calificación General</p>
                    <div id="grade-letter" class="text-8xl font-black mb-2" style="line-height:1">--</div>
                    <div class="flex items-center justify-center gap-2 mb-4">
                        <span id="score-overall" class="text-3xl font-bold text-gray-300">--</span>
                        <span class="text-gray-500">/100</span>
                    </div>
                    <!-- Comparison bar -->
                    <div class="max-w-md mx-auto">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>Tu sitio</span>
                            <span>Promedio industria: 62</span>
                        </div>
                        <div class="h-3 bg-dark-900 rounded-full overflow-hidden relative">
                            <div id="score-bar" class="h-full rounded-full transition-all duration-1000" style="width:0%">
                            </div>
                            <div class="absolute top-0 h-full w-0.5 bg-white/50" style="left:62%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Score Cards -->
            <div class="grid md:grid-cols-2 gap-6">
                <div class="glass rounded-2xl p-6">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-shield-halved text-brand-400"></i>
                            <span class="font-semibold">Seguridad</span>
                        </div>
                        <div id="grade-security" class="text-2xl font-black">--</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <span id="score-security" class="text-3xl font-bold text-brand-400">--</span>
                        <span class="text-gray-500 text-sm">/100</span>
                    </div>
                    <div class="h-2 bg-dark-900 rounded-full mt-3 overflow-hidden">
                        <div id="bar-security" class="h-full bg-brand-500 rounded-full transition-all duration-1000"
                            style="width:0%"></div>
                    </div>
                </div>
                <div class="glass rounded-2xl p-6">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-search text-accent-400"></i>
                            <span class="font-semibold">SEO Técnico</span>
                        </div>
                        <div id="grade-seo" class="text-2xl font-black">--</div>
                    </div>
                    <div class="flex items-center gap-3">
                        <span id="score-seo" class="text-3xl font-bold text-accent-400">--</span>
                        <span class="text-gray-500 text-sm">/100</span>
                    </div>
                    <div class="h-2 bg-dark-900 rounded-full mt-3 overflow-hidden">
                        <div id="bar-seo" class="h-full bg-accent-500 rounded-full transition-all duration-1000"
                            style="width:0%"></div>
                    </div>
                </div>
            </div>

            <!-- Severity Summary -->
            <div class="glass rounded-2xl p-6">
                <h2 class="text-xl font-semibold mb-4">Resumen de hallazgos</h2>
                <div id="severity-summary" class="grid grid-cols-5 gap-3 text-center"></div>
            </div>

            <!-- Download PDF -->
            <div id="download-section" class="glass rounded-2xl p-8 text-center glow-accent">
                <i class="fas fa-file-pdf text-5xl text-red-400 mb-4"></i>
                <h2 class="text-2xl font-bold mb-2">Tu reporte PDF está listo</h2>
                <p class="text-gray-400 mb-6">Hallazgos detallados + plan de acción 30/60/90 días + recomendaciones
                    priorizadas</p>
                <a id="download-btn" href="#" target="_blank"
                    class="inline-block px-10 py-4 bg-gradient-to-r from-red-600 to-orange-600 rounded-xl text-lg font-semibold hover:from-red-500 hover:to-orange-500 transition-all duration-300 hover:scale-105 transform">
                    <i class="fas fa-download mr-2"></i> Descargar PDF gratuito
                </a>
                <p id="download-expires" class="text-xs text-gray-500 mt-4"></p>
            </div>

            <!-- UPSELL SERVICES -->
            <div class="space-y-4">
                <h2 class="text-2xl font-bold text-center">
                    <i class="fas fa-star text-yellow-400 mr-2"></i>
                    ¿Qué hacer ahora?
                </h2>

                <div class="grid md:grid-cols-3 gap-4">
                    <!-- Service 1: Fix vulnerabilities -->
                    <div class="glass rounded-2xl p-6 border border-red-500/20 hover:border-red-500/50 transition group">
                        <div
                            class="w-12 h-12 rounded-xl bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                            <i class="fas fa-wrench text-xl text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">Corregir hallazgos</h3>
                        <p class="text-gray-400 text-sm mb-3">Nuestro equipo implementa las correcciones de seguridad y SEO.
                        </p>
                        <p class="text-xl font-bold text-white mb-3">Desde <span class="text-red-400">$297</span></p>
                        <a href="https://wa.me/18097776644?text=Hola,%20acabo%20de%20analizar%20mi%20sitio%20y%20necesito%20corregir%20los%20hallazgos"
                            class="block w-full text-center px-4 py-2 bg-red-600/20 hover:bg-red-600/40 rounded-lg text-red-400 font-medium text-sm transition">
                            <i class="fab fa-whatsapp mr-1"></i> Solicitar corrección
                        </a>
                    </div>

                    <!-- Service 2: Monthly monitoring -->
                    <div
                        class="glass rounded-2xl p-6 border border-brand-500/30 hover:border-brand-500/60 transition group relative">
                        <div
                            class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-brand-600 rounded-full text-xs font-bold">
                            MÁS POPULAR</div>
                        <div
                            class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                            <i class="fas fa-radar text-xl text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">Monitoreo mensual</h3>
                        <p class="text-gray-400 text-sm mb-3">Escaneo continuo + alertas + reportes mensuales de tu sitio.
                        </p>
                        <p class="text-xl font-bold text-white mb-3"><span class="text-brand-400">$27</span>/mes</p>
                        <a href="https://ciberseguridad.olo.run/#planes" target="_blank"
                            class="block w-full text-center px-4 py-2 bg-brand-600 hover:bg-brand-500 rounded-lg text-white font-medium text-sm transition">
                            <i class="fas fa-shield-halved mr-1"></i> Ver planes
                        </a>
                    </div>

                    <!-- Service 3: New website -->
                    <div
                        class="glass rounded-2xl p-6 border border-accent-500/20 hover:border-accent-500/50 transition group">
                        <div
                            class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent-500 to-accent-700 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                            <i class="fas fa-laptop-code text-xl text-white"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-1">Rediseño web seguro</h3>
                        <p class="text-gray-400 text-sm mb-3">Sitio nuevo, rápido, seguro desde el diseño. Score 90+
                            garantizado.</p>
                        <p class="text-xl font-bold text-white mb-3">Desde <span class="text-accent-400">$497</span></p>
                        <a href="https://site.olo.run/#contacto" target="_blank"
                            class="block w-full text-center px-4 py-2 bg-accent-600/20 hover:bg-accent-600/40 rounded-lg text-accent-400 font-medium text-sm transition">
                            <i class="fas fa-globe mr-1"></i> Cotizar sitio web
                        </a>
                    </div>
                </div>
            </div>

            <!-- Quick Contact -->
            <div class="glass rounded-2xl p-6 text-center border border-green-500/20">
                <p class="text-gray-400 mb-4">¿Prefieres hablar con un especialista? Te respondemos en menos de 1 hora.</p>
                <div class="flex flex-col sm:flex-row gap-3 justify-center">
                    <a href="https://wa.me/18097776644?text=Hola,%20acabo%20de%20analizar%20mi%20sitio%20web%20y%20necesito%20asesoría"
                        class="px-6 py-3 bg-green-600 hover:bg-green-500 rounded-xl font-medium transition">
                        <i class="fab fa-whatsapp mr-2"></i> WhatsApp directo
                    </a>
                    <a href="mailto:ventas@olorunsistemas.com"
                        class="px-6 py-3 glass rounded-xl font-medium hover:bg-white/10 transition">
                        <i class="fas fa-envelope mr-2"></i> ventas@olorunsistemas.com
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const jobId = {{ $jobId }};
        const severityColors = {
            critical: { bg: 'bg-red-500/20', text: 'text-red-400', label: 'Crítico' },
            high: { bg: 'bg-orange-500/20', text: 'text-orange-400', label: 'Alto' },
            medium: { bg: 'bg-yellow-500/20', text: 'text-yellow-400', label: 'Medio' },
            low: { bg: 'bg-blue-500/20', text: 'text-blue-400', label: 'Bajo' },
            info: { bg: 'bg-gray-500/20', text: 'text-gray-400', label: 'Info' },
        };

        function getGrade(score) {
            if (score >= 90) return { letter: 'A', color: 'text-green-400', barColor: 'bg-green-500' };
            if (score >= 80) return { letter: 'B', color: 'text-green-300', barColor: 'bg-green-400' };
            if (score >= 65) return { letter: 'C', color: 'text-yellow-400', barColor: 'bg-yellow-500' };
            if (score >= 50) return { letter: 'D', color: 'text-orange-400', barColor: 'bg-orange-500' };
            return { letter: 'F', color: 'text-red-400', barColor: 'bg-red-500' };
        }

        async function loadResults() {
            const res = await apiCall('GET', `/public/scan-jobs/${jobId}/status`);
            if (!res.ok) { alert('Error cargando resultados'); return; }

            const d = res.data;

            if (d.status !== 'done') {
                window.location.href = API_BASE.replace('/api', '') + '/progreso/' + jobId;
                return;
            }

            const overall = d.scores.overall;
            const security = d.scores.security;
            const seo = d.scores.seo;

            document.getElementById('result-domain').textContent = d.domain;
            document.getElementById('score-overall').textContent = overall;
            document.getElementById('score-security').textContent = security;
            document.getElementById('score-seo').textContent = seo;

            // Grade letters
            const gradeO = getGrade(overall);
            const gradeSec = getGrade(security);
            const gradeSeo = getGrade(seo);

            document.getElementById('grade-letter').textContent = gradeO.letter;
            document.getElementById('grade-letter').className = `text-8xl font-black mb-2 ${gradeO.color}`;

            document.getElementById('grade-security').textContent = gradeSec.letter;
            document.getElementById('grade-security').className = `text-2xl font-black ${gradeSec.color}`;

            document.getElementById('grade-seo').textContent = gradeSeo.letter;
            document.getElementById('grade-seo').className = `text-2xl font-black ${gradeSeo.color}`;

            // Animate bars
            setTimeout(() => {
                document.getElementById('score-bar').style.width = overall + '%';
                document.getElementById('score-bar').className = `h-full rounded-full transition-all duration-1000 ${gradeO.barColor}`;
                document.getElementById('bar-security').style.width = security + '%';
                document.getElementById('bar-seo').style.width = seo + '%';
            }, 300);

            // Severity summary
            const summaryEl = document.getElementById('severity-summary');
            const allSummary = {};
            Object.keys(severityColors).forEach(s => {
                const secCount = d.scores.summary.security_findings[s] || 0;
                const seoCount = d.scores.summary.seo_findings[s] || 0;
                allSummary[s] = secCount + seoCount;
            });

            Object.entries(severityColors).forEach(([key, val]) => {
                summaryEl.innerHTML += `
                        <div class="p-3 rounded-xl ${val.bg}">
                            <div class="text-2xl font-bold ${val.text}">${allSummary[key]}</div>
                            <div class="text-xs ${val.text}">${val.label}</div>
                        </div>`;
            });

            // Download link
            if (d.report_id) {
                const dlRes = await apiCall('GET', `/public/reports/${d.report_id}/download`);
                if (dlRes.ok) {
                    document.getElementById('download-btn').href = dlRes.data.download_url;
                    document.getElementById('download-expires').textContent =
                        `Enlace válido hasta: ${new Date(dlRes.data.expires_at).toLocaleString('es')}`;
                } else {
                    document.getElementById('download-section').innerHTML =
                        '<p class="text-gray-400"><i class="fas fa-clock mr-2"></i>El reporte PDF se está generando. Recarga en unos momentos.</p>';
                }
            }

            document.getElementById('loading').classList.add('hidden');
            document.getElementById('results').classList.remove('hidden');
        }

        loadResults();
    </script>
@endsection