web/js/layout.js

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

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

    // 2. Generar Sidebar (Con los nuevos enlaces)
    renderSidebar();

    // 3. Cargar Header (Mantenemos carga externa para la cabecera)
    await loadComponent("header-container", "header.html");

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

    // 5. Lógica del Usuario (Header)
    setupUserInfo(token);

    // 6. Configurar Logout (Ahora manejado dentro de renderSidebar para asegurar que existe el botón)
    const btnLogout = document.getElementById("globalBtnLogout");
    if(btnLogout) {
        btnLogout.addEventListener("click", () => {
            localStorage.removeItem("token");
            window.location.href = "index.html";
        });
    }
});

// --- GENERADOR DE SIDEBAR (NUEVO) ---
function renderSidebar() {
    const container = document.getElementById('sidebar-container');
    if (!container) return;

    // Detectar página actual
    const path = window.location.pathname.split("/").pop() || "index.html";

    // DEFINICIÓN DE MENÚ (Aquí añadimos Calendario y Automatizaciones)
    const menuItems = [
        { name: "Servicios", link: "servicios.html", icon: "briefcase" },
        { name: "Calendario", link: "calendario.html", icon: "calendar-days" }, // ✅ NUEVO
        { name: "Clientes", link: "clientes.html", icon: "users" },
        { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, // ✅ NUEVO (Icono rayo)
        { name: "Configuración", link: "configuracion.html", icon: "settings" },
    ];

    // Construir HTML de los enlaces
    const linksHtml = menuItems.map(item => {
        const isActive = path === item.link;
        // Estilos basados en tu diseño actual (Slate oscuro)
        const baseClasses = "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 font-medium mb-1 text-sm";
        const activeClasses = "bg-blue-600 text-white shadow-lg shadow-blue-500/30";
        const inactiveClasses = "text-slate-400 hover:text-white hover:bg-slate-800";

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

    // Inyectar HTML completo del Sidebar
    container.innerHTML = `
        <aside class="w-64 bg-slate-900 h-full flex flex-col text-white shadow-xl">
            <div class="p-6 border-b border-slate-800 flex items-center gap-3">
                <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center font-bold text-white shadow-lg">I</div>
                <div>
                    <h1 class="font-bold text-lg tracking-tight leading-none">Integra</h1>
                    <span class="text-[10px] text-slate-400 uppercase tracking-widest font-semibold">Repara</span>
                </div>
            </div>
            
            <nav class="flex-1 overflow-y-auto p-4 no-scrollbar">
                <p class="text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-4 px-2 mt-2">Principal</p>
                ${linksHtml}
            </nav>

            <div class="p-4 border-t border-slate-800 bg-slate-900/50">
                <button id="globalBtnLogout" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all w-full text-left text-sm font-medium">
                    <i data-lucide="log-out" class="w-5 h-5"></i>
                    Cerrar Sesión
                </button>
            </div>
        </aside>
    `;
}

// --- FUNCIONES AUXILIARES ---

async function loadComponent(elementId, filePath) {
    try {
        const response = await fetch(filePath);
        if (response.ok) {
            const html = await response.text();
            document.getElementById(elementId).innerHTML = html;
        } else {
            console.warn(`No se pudo cargar ${filePath} (puede que no sea necesario si usas el sidebar generado)`);
        }
    } catch (e) {
        // Ignoramos errores silenciosos para no molestar en consola
    }
}

function setupUserInfo(token) {
    try {
        const payload = JSON.parse(atob(token.split('.')[1]));
        
        // Elementos del Header
        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) {
        console.error("Error decodificando token", e);
        localStorage.removeItem("token");
        window.location.href = "index.html";
    }
}