@extends('layouts.public')
@section('title', 'Escaneo en Progreso — Olorun WebSec Analyzer')

@section('content')
    <div class="max-w-2xl mx-auto px-4 py-12">
        <div class="text-center mb-10 slide-up">
            <div
                class="w-20 h-20 rounded-2xl bg-gradient-to-br from-cyber-400 to-brand-500 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-radar fa-spin text-3xl" style="animation-duration:3s"></i>
            </div>
            <h1 class="text-3xl font-bold mb-2">Escaneo en progreso</h1>
            <p class="text-gray-400" id="domain-label">Analizando tu sitio web...</p>
        </div>

        <div class="glass rounded-2xl p-8 slide-up" style="animation-delay:0.2s">
            <!-- Progress bar -->
            <div class="mb-6">
                <div class="flex justify-between text-sm mb-2">
                    <span class="text-gray-400">Progreso</span>
                    <span id="progress-pct" class="text-brand-400 font-semibold">0%</span>
                </div>
                <div class="w-full h-3 rounded-full bg-white/10 overflow-hidden">
                    <div id="progress-bar"
                        class="h-full rounded-full bg-gradient-to-r from-brand-500 to-accent-500 transition-all duration-1000 ease-out shimmer"
                        style="width:0%"></div>
                </div>
            </div>

            <!-- Status -->
            <div class="text-center py-8">
                <div id="status-icon" class="text-5xl mb-4">
                    <i class="fas fa-cog fa-spin text-brand-400"></i>
                </div>
                <p id="status-text" class="text-lg font-medium text-gray-300">Esperando inicio del escaneo...</p>
                <p id="status-detail" class="text-sm text-gray-500 mt-2"></p>
            </div>

            <!-- Checks being performed -->
            <div class="space-y-3 mt-6">
                <p class="text-sm font-medium text-gray-400 mb-3">Checks realizándose:</p>
                <div class="grid grid-cols-2 gap-2 text-xs">
                    @php
                        $checks = [
                            'TLS & Certificados',
                            'Headers de Seguridad',
                            'Cookies',
                            'Mixed Content',
                            'Exposición de archivos',
                            'robots.txt',
                            'sitemap.xml',
                            'Meta Tags',
                            'Canonical',
                            'Performance',
                            'Status Codes',
                            'Compresión'
                        ];
                    @endphp
                    @foreach($checks as $i => $check)
                        <div class="flex items-center gap-2 p-2 rounded-lg bg-white/5" id="check-{{ $i }}">
                            <i class="fas fa-circle text-gray-600 text-[6px]"></i>
                            <span class="text-gray-500">{{ $check }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const jobId = {{ $jobId }};
        let pollInterval;
        let checkIndex = 0;

        function animateChecks() {
            const checks = document.querySelectorAll('[id^="check-"]');
            if (checkIndex < checks.length) {
                const el = checks[checkIndex];
                el.querySelector('i').className = 'fas fa-check-circle text-green-400 text-[8px]';
                el.querySelector('span').className = 'text-gray-300';
                checkIndex++;
            }
        }

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

                const d = res.data;
                document.getElementById('domain-label').textContent = `Analizando ${d.domain}...`;
                document.getElementById('progress-pct').textContent = d.progress + '%';
                document.getElementById('progress-bar').style.width = d.progress + '%';

                // Animate check items based on progress
                const targetChecks = Math.floor((d.progress / 100) * 12);
                while (checkIndex < targetChecks) animateChecks();

                if (d.status === 'running') {
                    document.getElementById('status-text').textContent = 'Escaneo en ejecución...';
                    document.getElementById('status-detail').textContent = `Iniciado: ${new Date(d.started_at).toLocaleTimeString('es')}`;
                }

                if (d.status === 'done') {
                    clearInterval(pollInterval);
                    while (checkIndex < 12) animateChecks();

                    document.getElementById('status-icon').innerHTML = '<i class="fas fa-check-circle text-green-400"></i>';
                    document.getElementById('status-text').textContent = '¡Escaneo completado!';
                    document.getElementById('status-detail').textContent = 'Redirigiendo a resultados...';
                    document.getElementById('progress-pct').textContent = '100%';
                    document.getElementById('progress-bar').style.width = '100%';

                    setTimeout(() => { window.location.href = API_BASE.replace('/api', '') + '/resultados/' + jobId; }, 2000);
                }

                if (d.status === 'failed') {
                    clearInterval(pollInterval);
                    document.getElementById('status-icon').innerHTML = '<i class="fas fa-times-circle text-red-400"></i>';
                    document.getElementById('status-text').textContent = 'Error en el escaneo';
                    document.getElementById('status-detail').textContent = d.error_detail || d.error_code || 'Error desconocido';
                }
            } catch (err) {
                console.error('Poll error:', err);
            }
        }

        pollInterval = setInterval(pollStatus, 3000);
        pollStatus();
    </script>
@endsection