@extends('layouts.public')
@section('title', 'Verificar Dominio — 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-16 h-16 rounded-2xl bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-check-double text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold mb-2">Verifica la propiedad del dominio</h1>
            <p class="text-gray-400">Antes de escanear, necesitamos confirmar que eres el propietario</p>
        </div>

        <!-- Loading -->
        <div id="loading-state" class="glass rounded-2xl p-8 text-center">
            <i class="fas fa-spinner fa-spin text-3xl text-brand-400 mb-4"></i>
            <p class="text-gray-400">Cargando instrucciones...</p>
        </div>

        <!-- Instructions -->
        <div id="verify-content" class="hidden space-y-6 slide-up">
            <!-- Domain & Token -->
            <div class="glass rounded-2xl p-6">
                <div class="flex items-center gap-3 mb-4">
                    <i class="fas fa-globe text-brand-400 text-xl"></i>
                    <div>
                        <p class="text-sm text-gray-400">Dominio</p>
                        <p id="domain-display" class="text-lg font-semibold"></p>
                    </div>
                </div>
                <div class="p-4 rounded-xl bg-black/30 border border-white/10">
                    <p class="text-xs text-gray-500 mb-1">Tu token de verificación:</p>
                    <code id="token-display" class="text-brand-300 text-sm break-all select-all"></code>
                </div>
            </div>

            <!-- Method 1: DNS TXT -->
            <div class="glass rounded-2xl p-6">
                <h3 class="text-lg font-semibold mb-3">
                    <i class="fas fa-server mr-2 text-cyber-400"></i> Opción A: Registro DNS TXT
                </h3>
                <ol class="text-gray-400 text-sm space-y-2 ml-4 list-decimal">
                    <li>Accede al panel DNS de tu proveedor de dominio</li>
                    <li>Añade un registro <strong class="text-white">TXT</strong> con el valor:</li>
                </ol>
                <div class="mt-3 p-3 rounded-lg bg-black/30 border border-white/10">
                    <code id="dns-value" class="text-green-400 text-sm break-all select-all"></code>
                </div>
                <p class="text-yellow-500/80 text-xs mt-2"><i class="fas fa-clock mr-1"></i> La propagación DNS puede tomar
                    hasta 24 horas</p>
                <button onclick="verify('dns_txt')"
                    class="mt-4 w-full py-3 glass rounded-xl hover:bg-white/10 transition font-medium">
                    <i class="fas fa-check mr-2"></i> Verificar DNS TXT
                </button>
            </div>

            <!-- Method 2: .well-known -->
            <div class="glass rounded-2xl p-6">
                <h3 class="text-lg font-semibold mb-3">
                    <i class="fas fa-file-code mr-2 text-accent-400"></i> Opción B: Archivo .well-known
                </h3>
                <ol class="text-gray-400 text-sm space-y-2 ml-4 list-decimal">
                    <li>Crea el directorio <code class="text-white">.well-known/</code> en la raíz de tu sitio</li>
                    <li>Dentro, crea un archivo llamado <code class="text-white">olorun-verify.txt</code></li>
                    <li>Pega el token como único contenido del archivo</li>
                    <li>Asegúrate de que sea accesible en:</li>
                </ol>
                <div class="mt-3 p-3 rounded-lg bg-black/30 border border-white/10">
                    <code id="wellknown-url" class="text-green-400 text-sm break-all select-all"></code>
                </div>
                <button onclick="verify('well_known')"
                    class="mt-4 w-full py-3 glass rounded-xl hover:bg-white/10 transition font-medium">
                    <i class="fas fa-check mr-2"></i> Verificar archivo
                </button>
            </div>

            <!-- Dev bypass -->
            <div id="dev-bypass" class="hidden glass rounded-2xl p-6 border border-green-500/30">
                <h3 class="text-lg font-semibold mb-2 text-green-400">
                    <i class="fas fa-code mr-2"></i> Modo Desarrollo
                </h3>
                <p class="text-gray-400 text-sm mb-4">Bypass de verificación disponible en modo desarrollo</p>
                <button onclick="verify('dev_bypass')"
                    class="w-full py-3 bg-green-600/30 hover:bg-green-600/50 rounded-xl transition font-medium text-green-300">
                    <i class="fas fa-forward mr-2"></i> Verificar sin validación (solo dev)
                </button>
            </div>

            <!-- Status message -->
            <div id="verify-status" class="hidden p-4 rounded-xl text-center"></div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const siteId = {{ $siteId }};

        async function loadInstructions() {
            const res = await apiCall('GET', `/public/sites/${siteId}/verify-instructions`);
            if (!res.ok) { alert('Error cargando instrucciones'); return; }

            const d = res.data;
            document.getElementById('domain-display').textContent = d.domain;
            document.getElementById('token-display').textContent = d.verify_token;
            document.getElementById('dns-value').textContent = d.instructions.dns_txt.value;
            document.getElementById('wellknown-url').textContent = d.instructions.well_known.url;

            if (d.dev_mode) {
                document.getElementById('dev-bypass').classList.remove('hidden');
            }

            if (d.status === 'verified' || d.status !== 'pending_verification') {
                // Already verified, go to scan
                window.location.href = API_BASE.replace('/api', '') + '/progreso/' + siteId;
                return;
            }

            document.getElementById('loading-state').classList.add('hidden');
            document.getElementById('verify-content').classList.remove('hidden');
        }

        async function verify(method) {
            const statusDiv = document.getElementById('verify-status');
            statusDiv.className = 'p-4 rounded-xl text-center bg-blue-500/20 text-blue-300';
            statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Verificando...';
            statusDiv.classList.remove('hidden');

            const res = await apiCall('POST', `/public/sites/${siteId}/verify`, { method });

            if (res.ok) {
                statusDiv.className = 'p-4 rounded-xl text-center bg-green-500/20 text-green-300';
                statusDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i> ¡Dominio verificado! Iniciando escaneo...';

                // Start scan
                const scanRes = await apiCall('POST', `/public/sites/${siteId}/scan`);
                if (scanRes.ok) {
                    setTimeout(() => {
                        window.location.href = API_BASE.replace('/api', '') + '/progreso/' + scanRes.data.scan_job_id;
                    }, 1500);
                }
            } else {
                statusDiv.className = 'p-4 rounded-xl text-center bg-red-500/20 text-red-300';
                statusDiv.innerHTML = '<i class="fas fa-times-circle mr-2"></i> ' + (res.data.error || 'Error') +
                    (res.data.hint ? '<br><span class="text-xs text-gray-400">' + res.data.hint + '</span>' : '');
            }
        }

        loadInstructions();
    </script>
@endsection