<%
  const appShell = !!(locals.user && !locals.publicPage);
%>
<% if (appShell) { %>
<%
  const path = locals.currentPath || '';
  const isAdmin = user.role === 'admin';
  const under = (p) => path === p || path.indexOf(p + '/') === 0;
  const channel = under('/email') ? 'email' : under('/sms') ? 'sms' : under('/telegram') ? 'telegram' : under('/whatsapp') ? 'whatsapp' : null;
  const pending = (isAdmin && typeof locals.pendingRequestCount === 'function') ? locals.pendingRequestCount() : 0;

  const item = (href, icon, label, active, badge) =>
    '<a href="' + href + '" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition ' +
    (active ? 'bg-brand-50 text-brand-700' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900') + '"' +
    (active ? ' aria-current="page"' : '') + '>' +
    '<span class="w-5 text-center">' + icon + '</span><span class="flex-1">' + label + '</span>' +
    (badge ? '<span class="px-1.5 py-0.5 text-[10px] font-bold rounded-full ' + (badge.style || 'bg-brand-100 text-brand-700') + '">' + badge.text + '</span>' : '') +
    '</a>';
  const sub = (href, label, active) =>
    '<a href="' + href + '" class="block pl-11 pr-3 py-1.5 rounded-lg text-[13px] transition ' +
    (active ? 'font-semibold text-brand-700' : 'text-slate-500 hover:text-slate-900') + '">' + label + '</a>';
  const group = (label) => '<p class="px-3 pt-5 pb-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">' + label + '</p>';
  const steps = {
    email:    [['/email/servers', '1 · Servers'],   ['/email/contacts', '2 · Contacts'], ['/email/send', '3 · Send']],
    sms:      [['/sms/accounts', '1 · Accounts'],   ['/sms/contacts', '2 · Contacts'],   ['/sms/send', '3 · Send']],
    telegram: [['/telegram/bots', '1 · Bots'],      ['/telegram/contacts', '2 · Contacts'], ['/telegram/send', '3 · Send']],
  };
  const channelItem = (key, icon, label, home) =>
    item(home, icon, label, channel === key) +
    (channel === key && steps[key] ? '<div class="mt-0.5 mb-1">' + steps[key].map((s) => sub(s[0], s[1], path === s[0])).join('') + '</div>' : '');
%>
<div class="min-h-screen lg:flex">
  <!-- Mobile top bar -->
  <div class="lg:hidden sticky top-0 z-40 flex items-center justify-between bg-white border-b border-slate-200 px-4 h-14">
    <a href="/dashboard" class="flex items-center gap-2 font-display font-semibold text-slate-900">
      <span class="w-7 h-7 rounded-lg bg-brand-500 text-white flex items-center justify-center text-sm font-bold">W</span> Wizahubltd
    </a>
    <button type="button" id="sidebar-open" class="p-2 -mr-2 text-slate-600" aria-label="Open menu">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
    </button>
  </div>
  <div id="sidebar-overlay" class="fixed inset-0 z-40 bg-black/40 hidden lg:hidden"></div>

  <aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 -translate-x-full lg:translate-x-0 lg:sticky lg:top-0 lg:h-screen lg:shrink-0 transition-transform bg-white border-r border-slate-200 flex flex-col">
    <div class="h-16 shrink-0 flex items-center justify-between px-4 border-b border-slate-100">
      <a href="/dashboard" class="flex items-center gap-2.5">
        <span class="w-8 h-8 rounded-lg bg-brand-500 text-white flex items-center justify-center font-display font-bold">W</span>
        <span class="text-[15px] font-display font-semibold text-slate-900 leading-tight">Wizahubltd<br><span class="text-xs font-sans font-medium text-slate-400">Multi Marketing</span></span>
      </a>
      <button type="button" id="sidebar-close" class="lg:hidden p-1 text-slate-400" aria-label="Close menu">&times;</button>
    </div>

    <nav class="flex-1 overflow-y-auto px-3 pb-4">
      <%- group('Overview') %>
      <%- item('/dashboard', '🏠', 'Dashboard', path === '/dashboard') %>
      <%- item('/campaigns', '📊', 'Campaigns', under('/campaigns')) %>

      <%- group('Channels') %>
      <%- channelItem('email', '✉️', 'Email', '/email/send') %>
      <%- channelItem('sms', '💬', 'SMS', '/sms/send') %>
      <%- channelItem('telegram', '✈️', 'Telegram', '/telegram/send') %>
      <%- item('/whatsapp', '📱', 'WhatsApp', under('/whatsapp'), { text: 'Soon', style: 'bg-amber-50 text-amber-700' }) %>

      <%- group('Sending access') %>
      <%- item('/requests', '🔑', 'Request access', path === '/requests') %>

      <% if (isAdmin) { %>
        <%- group('Admin') %>
        <%- item('/admin', '👥', 'Users', path === '/admin') %>
        <%- item('/admin/requests', '📥', 'Requests', under('/admin/requests'), pending > 0 ? { text: pending, style: 'bg-coral text-white' } : null) %>
        <%- item('/admin/products', '📦', 'Products', under('/admin/products')) %>
      <% } %>
    </nav>

    <div class="shrink-0 border-t border-slate-100 p-3">
      <div class="px-3 pb-2">
        <p class="text-xs font-semibold text-slate-700 truncate" title="<%= user.email %>"><%= user.email %></p>
        <p class="text-[11px] text-slate-400"><%= isAdmin ? 'Administrator' : 'Member' %></p>
      </div>
      <%- item('/account', '⚙️', 'Account', path === '/account') %>
      <a href="/logout" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:bg-red-50 hover:text-red-600 transition">
        <span class="w-5 text-center">↩︎</span><span>Log out</span>
      </a>
    </div>
  </aside>

  <div class="flex-1 min-w-0 flex flex-col min-h-screen">
<script>
  (function () {
    var sb = document.getElementById('sidebar');
    var ov = document.getElementById('sidebar-overlay');
    function open() { sb.classList.remove('-translate-x-full'); ov.classList.remove('hidden'); }
    function close() { sb.classList.add('-translate-x-full'); ov.classList.add('hidden'); }
    document.getElementById('sidebar-open').addEventListener('click', open);
    document.getElementById('sidebar-close').addEventListener('click', close);
    ov.addEventListener('click', close);
  })();
</script>
<% } else { %>
<nav class="bg-cream/90 backdrop-blur-md border-b-2 border-ink sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16 items-center">
      <!-- Logo -->
      <a href="/" class="flex items-center space-x-2.5 group">
        <div class="w-9 h-9 bg-coral rounded-xl border-2 border-ink flex items-center justify-center text-ink font-display font-bold text-lg -rotate-3 group-hover:rotate-0 transition">
          W
        </div>
        <span class="text-lg font-display font-semibold text-ink tracking-tight">
          Wizahubltd <span class="text-grape">Multi Marketing</span>
        </span>
      </a>

      <!-- Navigation Links -->
      <div class="flex items-center space-x-1">
        <% if (locals.user) { %>
          <a href="/dashboard" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">Dashboard</a>
          <a href="/email/contacts" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">Email</a>
          <a href="/telegram/contacts" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">Telegram</a>
          <a href="/sms/contacts" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">SMS</a>
          <a href="/whatsapp" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">WhatsApp</a>
          <a href="/requests" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">Access</a>
          <a href="/account" class="px-3 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">Account</a>
          <% if (user.role === 'admin') { %>
            <a href="/admin" class="px-3 py-2 text-sm font-semibold text-grape bg-grape-dim hover:bg-grape hover:text-white rounded-lg transition ml-1">Admin</a>
          <% } %>
          <a href="/logout" class="ml-2 px-4 py-2 text-sm font-semibold text-ink bg-white border-2 border-ink hover:bg-ink hover:text-white rounded-lg transition">Logout</a>
        <% } else { %>
          <a href="/login" class="px-4 py-2 text-sm font-semibold text-ink hover:bg-sun-dim rounded-lg transition">Log in</a>
          <a href="/register" class="px-4 py-2 text-sm font-semibold text-ink bg-sun border-2 border-ink hard-shadow-sm hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none rounded-lg transition">Get started</a>
        <% } %>
      </div>
    </div>
  </div>
</nav>
<% } %>
