document.addEventListener('DOMContentLoaded', () => {
    // 1. Verificación de Seguridad y Roles (Proteger la ruta)
    const token = localStorage.getItem('token');
    const rol = localStorage.getItem('rol'); 

    // Si no hay token, al login
    if (!token) {
        window.location.href = 'login.html';
        return;
    }


    if (rol !== 'usuario') {
        alert('Acceso denegado: Esta pantalla es exclusiva para colaboradores.');
        window.location.href = 'login.html'; 
        return;
    }

    // 2. Cargar datos del usuario en la interfaz si todo es correcto
    const nombres = localStorage.getItem('nombres');
    const area = localStorage.getItem('area');
    document.getElementById('nombreUsuario').textContent = `${nombres} (${area})`;

    // 3. Funcionalidad de Cerrar Sesión
    document.getElementById('btnCerrarSesion').addEventListener('click', () => {
        localStorage.clear();
        window.location.href = 'login.html';
    });


    const inputEvidencia = document.getElementById('evidencia');
    const textoArchivo = document.getElementById('textoArchivo');

    if (inputEvidencia && textoArchivo) {
        inputEvidencia.addEventListener('change', function() {
            if (this.files && this.files.length > 0) {
             
                const nombreArchivo = this.files[0].name;
     
                textoArchivo.innerHTML = `<span style="color: #10b981; font-weight: bold;"><i class="bi bi-check-circle-fill"></i> Cargado:</span> <span style="color: #0f172a;">${nombreArchivo}</span>`;
            } else {

                textoArchivo.innerHTML = '<span>Seleccionar archivo</span> o arrastra y suelta aquí';
            }
        });
    }

    // 4. Lógica para Enviar el Ticket
    document.getElementById('ticketForm').addEventListener('submit', async function(event) {
        event.preventDefault();

        const btnSubmit = document.querySelector('.btn-submit');
        const mensajeTicket = document.getElementById('mensajeTicket');

        const titulo = document.getElementById('titulo').value;
        const categoria = document.getElementById('categoria').value;
        const descripcion = document.getElementById('descripcion').value;
        const evidenciaFile = document.getElementById('evidencia').files[0];
        const usuario_id = localStorage.getItem('usuario_id'); 

        const formData = new FormData();
        formData.append('usuario_id', usuario_id);
        formData.append('titulo', titulo);
        formData.append('categoria', categoria);
        formData.append('descripcion', descripcion);
        
        if (evidenciaFile) {
            formData.append('evidencia', evidenciaFile);
        }

        try {
            btnSubmit.disabled = true;
            btnSubmit.textContent = 'Enviando...';

            const response = await fetch('http://localhost:3000/api/tickets', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            mensajeTicket.style.display = 'block';
            if (response.ok) {
                mensajeTicket.className = 'message-box success';
                mensajeTicket.textContent = `¡Ticket enviado con éxito! ID asignado: #${data.ticketId}`;
                document.getElementById('ticketForm').reset(); // Limpiamos el formulario
                
   
                if (textoArchivo) {
                    textoArchivo.innerHTML = '<span>Seleccionar archivo</span> o arrastra y suelta aquí';
                }

            } else {
                mensajeTicket.className = 'message-box error';
                mensajeTicket.textContent = data.message || "Error al registrar el ticket.";
            }
        } catch (error) {
            mensajeTicket.style.display = 'block';
            mensajeTicket.className = 'message-box error';
            mensajeTicket.textContent = "Error de conexión con el servidor.";
            console.error(error);
        } finally {
            btnSubmit.disabled = false;
            btnSubmit.textContent = 'Enviar Ticket a TI';
        }
    });
});