@extends('layouts.auth')

@push('styles')
<style>
    .spinner-border {
        vertical-align: middle;
        margin-right: 0.5rem;
    }
    .btn:disabled {
        cursor: not-allowed;
    }
    .step {
        display: none;
    }
    .step.active {
        display: block;
    }
    .invalid-feedback {
        display: none;
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 0.25rem;
    }
    .is-invalid ~ .invalid-feedback {
        display: block;
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Recuperar Contraseña') }}</div>

                <div class="card-body">
                    <!-- Mensajes de estado -->
                    <div id="alertMessage" class="alert d-none" role="alert"></div>

                    <!-- Paso 1: Ingresar correo electrónico -->
                    <div id="emailStep">
                        <p>Ingrese su dirección de correo electrónico para recuperar su contraseña.</p>
                        <div class="mb-3">
                            <label for="email" class="form-label">Correo Electrónico</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                   id="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                            <div class="invalid-feedback">Por favor ingrese un correo electrónico válido.</div>
                            @error('email')
                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <button type="button" id="siguienteBtn" class="btn btn-primary">
                            <span id="spinnerSiguiente" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Siguiente
                        </button>
                    </div>

                    <!-- Paso 2: Preguntas de seguridad (se mostrará después de verificar el correo) -->
                    <!-- Paso 2: Preguntas de seguridad (se mostrará después de verificar el correo) -->
                    <div id="preguntasStep" class="d-none">
                        <p>Por favor responda las siguientes preguntas de seguridad:</p>
                        <div id="preguntasContainer">
                            <!-- Las preguntas se cargarán aquí dinámicamente -->
                        </div>
                        <button type="button" id="verificarRespuestasBtn" class="btn btn-primary mt-3">
                            <span id="spinnerVerificar" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Verificar Respuestas
                        </button>
                    </div>
                </div>
            </div>
        </div>

        @push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Configuración global para incluir el token CSRF en todas las peticiones AJAX
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $(document).ready(function() {
        console.log('jQuery cargado correctamente');
        
        // Manejador de clic para el botón Siguiente
        $('#siguienteBtn').on('click', function() {
            console.log('Botón Siguiente clickeado');
            const email = $('#email').val().trim();
            console.log('Email ingresado:', email);
            
            // Validar que el campo no esté vacío
            if (!email) {
                console.log('El campo de email está vacío');
                return;
            }
            
            // Validar formato de email
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                console.log('Formato de email inválido');
                return;
            }
            
            // Mostrar spinner de carga
            const $btn = $(this);
            const $spinner = $('#spinnerSiguiente');
            $btn.prop('disabled', true);
            $spinner.removeClass('d-none');
            
            // Hacer la petición AJAX para verificar el correo
            $.ajax({
                url: '{{ route('verificar.email') }}',
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    email: email
                },
                dataType: 'json',
                success: function(response) {
                    console.log('Respuesta del servidor:', response);
                    if (response.existe) {
                        console.log('El correo existe en la base de datos');
                        // Obtener preguntas de seguridad
                        obtenerPreguntasSeguridad(email);
                    } else {
                        console.log('El correo no existe en la base de datos');
                        alert(response.mensaje);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error al verificar el correo:', error);
                    alert('Ocurrió un error al verificar el correo. Por favor, intente nuevamente.');
                },
                complete: function() {
                    // Ocultar spinner y habilitar botón
                    $btn.prop('disabled', false);
                    $spinner.addClass('d-none');
                }
            });
        });
    });

    // Función para obtener y mostrar preguntas de seguridad
    function obtenerPreguntasSeguridad(email) {
        console.log('Obteniendo preguntas de seguridad para:', email);
        
        // Mostrar spinner
        const $spinner = $('#spinnerSiguiente');
        $spinner.removeClass('d-none');
        
        // Hacer la petición AJAX para obtener las preguntas
        $.ajax({
            url: '/auth/preguntas/aleatorias',
            method: 'GET',
            data: { email: email },
            dataType: 'json',
            success: function(response) {
                console.log('Preguntas recibidas:', response);
                if (response.success && response.preguntas && response.preguntas.length > 0) {
                    mostrarFormularioPreguntas(response.preguntas, email);
                } else {
                    alert('No se pudieron cargar las preguntas de seguridad. Por favor, intente nuevamente.');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error al obtener preguntas:', error);
                alert('Ocurrió un error al cargar las preguntas de seguridad.');
            },
            complete: function() {
                $spinner.addClass('d-none');
            }
        });
    }
    
    // Función para mostrar el formulario de preguntas
    function mostrarFormularioPreguntas(preguntas, email) {
        console.log('Mostrando formulario de preguntas para:', email);
        console.log('Preguntas recibidas:', preguntas);
        
        // Ocultar el paso del email y mostrar el de preguntas
        $('#emailStep').addClass('d-none');
        $('#preguntasStep').removeClass('d-none');
        
        let html = '<h4>Por favor, responde las siguientes preguntas de seguridad:</h4>';
        
        preguntas.forEach((pregunta, index) => {
            html += `
                <div class="form-group pregunta-item mb-3" data-pregunta-id="${pregunta.id_pregunta}">
                    <label class="form-label">${pregunta.pregunta}</label>
                    <input type="text" class="form-control respuesta-input" 
                           name="respuesta_${index}" required>
                    <div class="invalid-feedback">Por favor responde esta pregunta</div>
                </div>`;
        });
        
        html += `
            <div class="d-flex align-items-center mt-4">
                <button type="button" id="verificarRespuestasBtn" class="btn btn-primary me-2">
                    Verificar Respuestas
                </button>
                <div id="spinnerVerificar" class="spinner-border text-primary d-none" role="status">
                    <span class="visually-hidden">Cargando...</span>
                </div>
            </div>`;
        
        $('#preguntasStep').html(html);
        
        // Configurar el evento click después de agregar el botón al DOM
        $('#verificarRespuestasBtn').off('click').on('click', function() {
            verificarRespuestas(email);
        });
        
        // Configurar validación en tiempo real
        $('.respuesta-input').on('input', function() {
            if ($(this).val().trim() !== '') {
                $(this).removeClass('is-invalid');
            }
        });
    }
    
    // Función para verificar las respuestas
    function verificarRespuestas(email) {
        const $form = $('#preguntasStep');
        const $btn = $('#verificarRespuestasBtn');
        const $spinner = $('#spinnerVerificar');
        
        // Mostrar spinner
        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        
        // Obtener las respuestas
        const respuestas = [];
        $('.pregunta-item').each(function() {
            const $pregunta = $(this);
            const preguntaId = $pregunta.data('pregunta-id');
            const respuesta = $pregunta.find('input[type="text"]').val().trim();
            
            if (preguntaId && respuesta) {
                respuestas.push({
                    id_pregunta: preguntaId,
                    respuesta: respuesta
                });
            }
        });
        
        console.log('Respuestas a enviar:', respuestas);
        
        // Enviar respuestas al servidor
        console.log('Enviando respuestas al servidor:', {email, respuestas});
        $.ajax({
            url: '/auth/verificar-respuestas',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                email: email,
                respuestas: respuestas
            },
            dataType: 'json',
            success: function(response) {
                console.log('Respuesta de verificación:', response);
                if (response.success) {
                    // Mostrar formulario para nueva contraseña
                    mostrarFormularioNuevaContraseña(email);
                } else {
                    alert(response.message || 'Las respuestas no son correctas. Por favor, intente nuevamente.');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error al verificar respuestas:', error);
                alert('Ocurrió un error al verificar las respuestas. Por favor, intente nuevamente.');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
            }
        });
    }
    
    // Función para mostrar el formulario de nueva contraseña
    function mostrarFormularioNuevaContraseña(email) {
        const html = `
            <div class="mb-3">
                <label for="password" class="form-label">Nueva Contraseña</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <div class="mb-3">
                <label for="password_confirmation" class="form-label">Confirmar Contraseña</label>
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
            </div>
            <button type="button" id="cambiarPasswordBtn" class="btn btn-primary">
                <span id="spinnerCambiar" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                Cambiar Contraseña
            </button>
        `;
        
        // Actualizar el contenido
        $('#preguntasStep').html(`
            <h4>Establecer Nueva Contraseña</h4>
            <p>Por favor ingrese su nueva contraseña.</p>
            <form id="formNuevaContraseña">
                <input type="hidden" name="email" value="${email}">
                ${html}
            </form>
        `);
        
        // Manejar el envío del formulario
        $('#cambiarPasswordBtn').on('click', function() {
            cambiarContraseña(email);
        });
    }
    
    // Función para cambiar la contraseña
    function cambiarContraseña(email) {
        const $form = $('#formNuevaContraseña');
        const $btn = $('#cambiarPasswordBtn');
        const $spinner = $('#spinnerCambiar');
        const password = $('#password').val();
        const password_confirmation = $('#password_confirmation').val();
        
        // Validaciones básicas
        if (!password || password.length < 8) {
            alert('La contraseña debe tener al menos 8 caracteres.');
            return;
        }
        
        if (password !== password_confirmation) {
            alert('Las contraseñas no coinciden.');
            return;
        }
        
        // Mostrar spinner
        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        
        // Enviar solicitud para cambiar la contraseña
        $.ajax({
            url: '/auth/reset-password',
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                email: email,
                password: password,
                password_confirmation: password_confirmation
            },
            dataType: 'json',
            success: function(response) {
                console.log('Respuesta de cambio de contraseña:', response);
                if (response.success) {
                    alert('¡Contraseña cambiada exitosamente! Ahora puede iniciar sesión con su nueva contraseña.');
                    window.location.href = '/login';
                } else {
                    alert(response.message || 'Error al cambiar la contraseña. Por favor, intente nuevamente.');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error al cambiar la contraseña:', error);
                let errorMessage = 'Ocurrió un error al cambiar la contraseña. Por favor, intente nuevamente.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                alert(errorMessage);
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
            }
        });
    }
</script>
@endpush