<?php
if (count(get_included_files()) === 1) { http_response_code(403); exit('Forbidden'); }
$activeNav  = $activeNav  ?? '';
$bizName    = $_SESSION['tenant_name'] ?? 'Mi negocio';
$ownerRole  = (($_SESSION['user_role'] ?? '') === 'owner') ? 'Dueño' : 'Staff';
$userEmail  = $_SESSION['user_email'] ?? '';
// Lazy-load email from DB on first load after a session without it
if (!$userEmail && isset($db) && isset($_SESSION['user_id'])) {
    try {
        $stmt = $db->prepare("SELECT email FROM users WHERE id = :id LIMIT 1");
        $stmt->execute([':id' => (int)$_SESSION['user_id']]);
        $row = $stmt->fetch();
        $userEmail = $row['email'] ?? $_SESSION['user_name'] ?? '';
        if ($row) $_SESSION['user_email'] = $userEmail;
    } catch (Throwable $e) {
        $userEmail = $_SESSION['user_name'] ?? '';
    }
}
$navUnread = $open_convs ?? 0;
?>
<aside class="sidebar">
    <div class="sidebar-logo">
        <a href="/inicio" style="display:block;">
            <img src="/img/logo-white.png" alt="Vale" style="height:34px;width:auto;display:block;">
        </a>
    </div>
    <ul class="sidebar-nav">
        <li class="<?= $activeNav === 'inicio' ? 'active' : '' ?>">
            <a href="/inicio">
                <svg style="margin-right:10px;width:20px;height:20px;flex:none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                </svg>
                Inicio
            </a>
        </li>
        <li class="<?= $activeNav === 'mensajes' ? 'active' : '' ?>">
            <a href="/mensajes">
                <svg style="margin-right:10px;width:20px;height:20px;flex:none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                </svg>
                Mensajes
            </a>
        </li>
        <li class="<?= $activeNav === 'clientes' ? 'active' : '' ?>">
            <a href="/clientes">
                <svg style="margin-right:10px;width:20px;height:20px;flex:none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-3-3.87M9 20H4v-2a4 4 0 013-3.87m6-1a4 4 0 10-8 0 4 4 0 008 0zm6-3a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                Clientes
            </a>
        </li>
        <li class="<?= $activeNav === 'agenda' ? 'active' : '' ?>">
            <a href="/agenda">
                <svg style="margin-right:10px;width:20px;height:20px;flex:none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                Agenda
            </a>
        </li>
        <li class="<?= $activeNav === 'negocio' ? 'active' : '' ?>">
            <a href="/negocio">
                <svg style="margin-right:10px;width:20px;height:20px;flex:none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-2 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
                Mi negocio
            </a>
        </li>
        <li class="<?= $activeNav === 'ajustes' ? 'active' : '' ?>">
            <a href="/ajustes">
                <svg style="margin-right:10px;width:20px;height:20px;flex:none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                Ajustes
            </a>
        </li>
    </ul>

    <!-- Mobile-only: email + cerrar sesión + gear (hidden on desktop via CSS) -->
    <div class="sidebar-mobile-right">
        <span class="sidebar-mobile-email"><?= htmlspecialchars($userEmail) ?></span>
        <a href="/logout" class="sidebar-mobile-logout">Cerrar sesión</a>
        <a href="/ajustes" class="sidebar-gear" aria-label="Ajustes">
            <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
        </a>
    </div>

    <!-- Desktop footer -->
    <div class="sidebar-footer">
        <div class="user-info">
            <p style="font-weight:600;color:#FFF;font-size:.9rem;"><?= htmlspecialchars($bizName) ?></p>
            <p style="font-size:.75rem;"><?= htmlspecialchars($_SESSION['user_name'] ?? '') ?> · <?= $ownerRole ?></p>
        </div>
        <a href="/logout" class="btn logout-btn">Cerrar sesión</a>
    </div>
</aside>

<!-- Bottom tab bar — 5 items, Vale center elevated -->
<nav class="bottom-nav" aria-label="Navegación principal">
    <a href="/inicio" class="<?= $activeNav === 'inicio' ? 'active' : '' ?>">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
        </svg>
        <span>Inicio</span>
    </a>
    <a href="/mensajes" class="<?= $activeNav === 'mensajes' ? 'active' : '' ?>" style="position:relative">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span>Mensajes</span>
        <?php if ($navUnread > 0): ?>
            <span class="nav-badge"><?= $navUnread > 9 ? '9+' : $navUnread ?></span>
        <?php endif; ?>
    </a>

    <!-- Vale — center CTA -->
    <button class="nav-vale-btn" onclick="if(typeof vcOpen==='function'){vcOpen();}else{location='/inicio';}" aria-label="Hablar con Vale">
        <div class="nav-vale-center">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.6 9.6 0 0 1-3-.5L3 21l1.6-4a8.3 8.3 0 0 1-1-4A8.4 8.4 0 0 1 12 4.6a8.4 8.4 0 0 1 9 6.9z"/>
                <circle cx="8.5" cy="11.5" r="1" fill="#fff" stroke="none"/>
                <circle cx="12" cy="11.5" r="1" fill="#fff" stroke="none"/>
                <circle cx="15.5" cy="11.5" r="1" fill="#fff" stroke="none"/>
            </svg>
        </div>
        <span class="nav-vale-label">Vale</span>
    </button>

    <a href="/agenda" class="<?= $activeNav === 'agenda' ? 'active' : '' ?>">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <span>Agenda</span>
    </a>
    <a href="/negocio" class="<?= $activeNav === 'negocio' ? 'active' : '' ?>">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-2 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
        </svg>
        <span>Negocio</span>
    </a>
</nav>
