<?php
/**
 * ASISMA CRM - Topbar Layout Component
 */
?>
<header class="sticky top-0 z-10 flex h-16 w-full items-center justify-between border-b border-slate-800 bg-slate-900 px-6 shadow-sm backdrop-blur-md bg-slate-900/90">
    <div class="flex items-center gap-4">
        <!-- Mobile Toggle Button -->
        <button id="openSidebar" class="p-2 -ml-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800/80 lg:hidden">
            <i data-lucide="menu" class="w-6 h-6"></i>
        </button>

        <!-- Ocultar/mostrar barra lateral (escritorio): gana espacio horizontal -->
        <button onclick="alternarSidebar()" id="btnSidebar" title="Ocultar / mostrar la barra lateral"
                class="hidden lg:block p-2 -ml-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800/80 transition-colors">
            <i data-lucide="panel-left-close" class="w-5 h-5 sidebar-icono-cerrar"></i>
            <i data-lucide="panel-left-open" class="w-5 h-5 sidebar-icono-abrir hidden"></i>
        </button>
        
        <!-- Franquicia activa + sección -->
        <div class="flex items-center gap-3 min-w-0">
            <?php $franquiciaNombre = SessionHelper::getFranquiciaNombre(); ?>
            <?php if ($franquiciaNombre !== ''): ?>
                <h1 class="text-lg lg:text-xl font-bold tracking-tight text-white truncate max-w-[40vw]" title="<?php echo htmlspecialchars($franquiciaNombre); ?>">
                    <?php echo htmlspecialchars($franquiciaNombre); ?>
                </h1>
                <span class="text-slate-600 hidden sm:inline">/</span>
            <?php endif; ?>
            <h2 class="text-sm font-semibold text-slate-400 hidden sm:block truncate"><?php echo isset($title) ? $title : 'Inicio'; ?></h2>
        </div>
    </div>

    <!-- Right Side Actions -->
    <div class="flex items-center gap-4">
        <!-- Quick Create Button (Placeholder) -->
        <a href="<?php echo APP_URL; ?>/leads/crear" class="hidden sm:flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-semibold shadow-md shadow-blue-600/10 transition-all hover:shadow-blue-600/20">
            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
            <span>Nuevo Lead</span>
        </a>

        <!-- Selector de tema claro/oscuro -->
        <button onclick="alternarTema()" id="btnTema" title="Cambiar tema claro/oscuro"
                class="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800/80 transition-colors">
            <i data-lucide="sun" class="w-5 h-5 tema-icono-sol hidden"></i>
            <i data-lucide="moon" class="w-5 h-5 tema-icono-luna hidden"></i>
        </button>

        <!-- Notification Bell -->
        <div class="relative">
            <button class="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800/80 transition-colors">
                <i data-lucide="bell" class="w-5 h-5"></i>
                <!-- Red dot indicator -->
                <span class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-blue-500 ring-2 ring-slate-900"></span>
            </button>
        </div>

        <div class="h-6 w-px bg-slate-800"></div>

        <!-- Connection Indicator -->
        <div class="flex items-center gap-2 text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full ring-1 ring-emerald-500/20">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            <span class="hidden md:inline">API Conectada</span>
        </div>
    </div>
</header>
