web/js/layout.js

// CONFIGURACIÓN GLOBAL
const API_URL = "https://integrarepara-api.integrarepara.es";

document.addEventListener("DOMContentLoaded", () => {
    // 1. Verificar Token
    const token = localStorage.getItem("token");
    if (!token) {
        if (!window.location.pathname.endsWith("index.html") && window.location.pathname !== "/") {
            window.location.href = "index.html";
            return;
        }
    }

    // 2. Generar Sidebar y Header
    renderSidebar();
    renderHeader();

    // 3. Inicializar Iconos
    if (window.lucide) lucide.createIcons();

    // 4. Datos usuario
    if (token) setupUserInfo(token);
});

// --- GENERADOR DE BARRA LATERAL (DISEÑO ORIGINAL RESTAURADO) ---
function renderSidebar() {
    const container = document.getElementById('sidebar-container');
    if (!container) return;

    const path = window.location.pathname.split("/").pop() || "index.html";

 // MENUS.
const menuItems = [
    { name: "Dashboard", link: "panel.html", icon: "layout-dashboard" },
    { name: "Servicios", link: "servicios.html", icon: "briefcase" },
    { name: "Citas / Bloqueos", link: "agenda.html", icon: "calendar-clock" },
    { name: "Proveedores", link: "proveedores.html", icon: "building-2" }, // Nuevo nombre para el buzón actual
    { name: "Calendario", link: "calendario.html", icon: "calendar" },
    { name: "Clientes", link: "clientes.html", icon: "users" },
    { name: "Usuarios", link: "usuarios.html", icon: "user-cog" },
    { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, // Queda libre para lo nuevo
    { name: "Configuración", link: "configuracion.html", icon: "settings" },
];

    const linksHtml = menuItems.map(item => {
        const isActive = path === item.link;
        // ESTILOS ORIGINALES (Texto Slate-400, Hover Blanco/Slate-800)
        const baseClasses = "nav-item flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-sm font-medium";
        // Si está activo, usamos el azul original de tu diseño, si no, el gris
        const activeClasses = isActive 
            ? "bg-blue-600 text-white shadow-lg shadow-blue-500/30" 
            : "text-slate-400 hover:text-white hover:bg-slate-800";

        return `
            <a href="${item.link}" class="${baseClasses} ${activeClasses}">
                <i data-lucide="${item.icon}" class="w-5 h-5"></i>
                <span>${item.name}</span>
            </a>
        `;
    }).join("");

    container.innerHTML = `
        <aside class="w-64 bg-slate-900 text-white flex flex-col shadow-xl z-20 h-full transition-all">
            <div class="h-16 flex items-center justify-center border-b border-slate-800 shrink-0">
                <h1 class="text-xl font-bold tracking-wider text-blue-400">INTEGRA<span class="text-white">REPARA</span></h1>
            </div>
            
            <nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto no-scrollbar">
                ${linksHtml}
            </nav>

            <div class="p-4 border-t border-slate-800 shrink-0">
                <button onclick="logout()" class="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors w-full p-2 rounded hover:bg-slate-800 font-medium text-sm">
                    <i data-lucide="log-out" class="w-5 h-5"></i>
                    <span>Cerrar Sesión</span>
                </button>
            </div>
        </aside>
    `;
}

// --- GENERADOR DE CABECERA (HEADER) ---
function renderHeader() {
    const container = document.getElementById('header-container');
    if (!container) return;

    // Fecha actual
    const dateStr = new Date().toLocaleDateString('es-ES', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
    const dateCapitalized = dateStr.charAt(0).toUpperCase() + dateStr.slice(1);

    container.innerHTML = `
        <header class="bg-white h-16 border-b border-gray-200 flex justify-between items-center px-6 shadow-sm z-10 shrink-0">
            <div class="flex items-center text-gray-500 text-sm gap-2">
                <i data-lucide="calendar" class="w-4 h-4"></i>
                <span class="font-medium">${dateCapitalized}</span>
            </div>
            
            <div class="flex items-center gap-4">
                <div class="text-right hidden md:block">
                    <p class="text-sm font-bold text-gray-800 leading-none" id="headerUserName">Cargando...</p>
                    <p class="text-xs text-gray-500 mt-1" id="headerUserRole">...</p>
                </div>
                <div class="w-9 h-9 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold shadow-sm" id="headerUserAvatar">
                    U
                </div>
            </div>
        </header>
    `;
}

// --- UTILIDADES ---
function setupUserInfo(token) {
    try {
        const payload = JSON.parse(atob(token.split('.')[1]));
        const nameEl = document.getElementById("headerUserName");
        const roleEl = document.getElementById("headerUserRole");
        const avatarEl = document.getElementById("headerUserAvatar");

        if (nameEl) nameEl.innerText = payload.email || "Usuario";
        if (roleEl) roleEl.innerText = (payload.role || "Operario").toUpperCase();
        if (avatarEl) avatarEl.innerText = (payload.email?.[0] || "U").toUpperCase();
    } catch (e) {
        localStorage.removeItem("token");
    }
}

function logout() {
    if(confirm("¿Cerrar sesión?")) {
        localStorage.removeItem("token");
        window.location.href = "index.html";
    }
}