@extends('layouts.public')
@section('title', 'Analizar Sitio — 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-brand-500 to-accent-500 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-search text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold mb-2">Analiza tu sitio web</h1>
            <p class="text-gray-400">Ingresa los datos para iniciar el análisis de seguridad y SEO</p>
        </div>

        <!-- Error display -->
        <div id="form-errors" class="hidden mb-6 p-4 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300"></div>

        <form id="lead-form" class="glass rounded-2xl p-8 space-y-6 slide-up" style="animation-delay:0.2s">
            <!-- URL -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    <i class="fas fa-globe mr-1"></i> URL del sitio web *
                </label>
                <input type="url" id="url" name="url" required placeholder="https://ejemplo.com"
                    class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-brand-500 transition">
            </div>

            <!-- Nombre -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    <i class="fas fa-user mr-1"></i> Nombre completo *
                </label>
                <input type="text" id="full_name" name="full_name" required placeholder="Juan Pérez"
                    class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-brand-500 transition">
            </div>

            <!-- Email -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    <i class="fas fa-envelope mr-1"></i> Email *
                </label>
                <input type="email" id="email" name="email" required placeholder="juan@empresa.com"
                    class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-brand-500 transition">
            </div>

            <!-- WhatsApp -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">
                    <i class="fab fa-whatsapp mr-1"></i> WhatsApp *
                </label>
                <input type="tel" id="whatsapp" name="whatsapp" required placeholder="+1 809 555 1234"
                    class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:border-brand-500 transition">
            </div>

            <!-- Consentimiento -->
            <div class="flex items-start gap-3">
                <input type="checkbox" id="consent" name="consent" required
                    class="mt-1 w-5 h-5 rounded border-white/20 bg-white/5 text-brand-500 focus:ring-brand-500">
                <label for="consent" class="text-sm text-gray-400">
                    Acepto los <a href="{{ url('/terminos') }}" target="_blank"
                        class="text-brand-400 hover:underline">Términos de Servicio</a>
                    y la <a href="{{ url('/privacidad') }}" target="_blank" class="text-brand-400 hover:underline">Política
                        de Privacidad</a>.
                    Mis datos serán procesados para realizar el análisis solicitado de forma confidencial.
                </label>
            </div>

            <!-- reCAPTCHA v3 (invisible) -->
            <input type="hidden" id="captcha_token" value="">

            <!-- Submit -->
            <button type="submit" id="submit-btn"
                class="w-full py-4 bg-gradient-to-r from-brand-600 to-accent-600 rounded-xl text-lg font-semibold hover:from-brand-500 hover:to-accent-500 transition-all duration-300 glow hover:scale-[1.02] transform disabled:opacity-50 disabled:cursor-not-allowed">
                <span id="btn-text"><i class="fas fa-paper-plane mr-2"></i> Enviar y continuar</span>
                <span id="btn-loading" class="hidden"><i class="fas fa-spinner fa-spin mr-2"></i> Procesando...</span>
            </button>
        </form>
    </div>
@endsection

@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js?render=6LeE8G0sAAAAANs-GvSF5xJg4ejCgg2HaE9pV6vd"></script>
    <script>
        document.getElementById('lead-form').addEventListener('submit', async function (e) {
            e.preventDefault();

            const errorsDiv = document.getElementById('form-errors');
            const submitBtn = document.getElementById('submit-btn');
            const btnText = document.getElementById('btn-text');
            const btnLoading = document.getElementById('btn-loading');

            errorsDiv.classList.add('hidden');
            submitBtn.disabled = true;
            btnText.classList.add('hidden');
            btnLoading.classList.remove('hidden');

            try {
                // Get reCAPTCHA v3 token
                const captchaToken = await grecaptcha.execute('6LeE8G0sAAAAANs-GvSF5xJg4ejCgg2HaE9pV6vd', { action: 'submit_lead' });

                const data = {
                    url: document.getElementById('url').value,
                    full_name: document.getElementById('full_name').value,
                    email: document.getElementById('email').value,
                    whatsapp: document.getElementById('whatsapp').value,
                    consent: document.getElementById('consent').checked,
                    captcha_token: captchaToken,
                };

                const res = await apiCall('POST', '/public/leads', data);

                if (res.ok) {
                    if (res.data.scan_job_id) {
                        window.location.href = API_BASE.replace('/api', '') + '/progreso/' + res.data.scan_job_id;
                    } else {
                        // Scan dispatch falló pero lead se guardó
                        errorsDiv.innerHTML = '<span style="color:#22c55e">✅ ' + res.data.message + '</span>';
                        errorsDiv.classList.remove('hidden');
                    }
                } else {
                    let msg = res.data.message || res.data.error || 'Error desconocido';
                    if (res.data.errors) {
                        msg = Object.values(res.data.errors).flat().join('<br>');
                    }
                    if (res.data.details) {
                        msg += '<br>' + res.data.details.join('<br>');
                    }
                    errorsDiv.innerHTML = msg;
                    errorsDiv.classList.remove('hidden');
                }
            } catch (err) {
                errorsDiv.textContent = 'Error de conexión. Inténtalo de nuevo.';
                errorsDiv.classList.remove('hidden');
            }

            submitBtn.disabled = false;
            btnText.classList.remove('hidden');
            btnLoading.classList.add('hidden');
        });
    </script>
@endsection