<%# app/views/layouts/_navbar.html.erb %>
<%# Sidebar lateral — responsiva (esconde no mobile, hamburguer abre) %>

<%# Overlay mobile %>
<div id="sidebar-overlay"
     class="fixed inset-0 bg-black/70 z-30 hidden md:hidden"
     onclick="toggleSidebar()"></div>

<%# Sidebar %>
<aside id="sidebar"
       class="fixed top-0 left-0 h-full w-64 bg-[#111111] border-r border-[#2a2a2a] z-40
              transform -translate-x-full md:translate-x-0 transition-transform duration-300">

  <%# Logo / Marca %>
  <div class="px-4 py-5 border-b border-[#2a2a2a]">
    <%= image_tag '/logo-reem.png', alt: 'Reem Transporte',
        class: 'h-14 w-auto mx-auto object-contain' %>
  </div>

  <%# Usuário logado %>
  <div class="px-6 py-4 border-b border-[#2a2a2a]">
    <p class="text-xs text-gray-500 mb-1">Logado como</p>
    <p class="text-white font-semibold text-sm truncate"><%= current_user.nome_display %></p>
    <span class="inline-block mt-1 px-2 py-0.5 text-xs rounded-full
                 <%= current_user.admin? ? 'bg-orange-500 text-black' :
                     current_user.gerente? ? 'bg-orange-800 text-white' :
                     current_user.operador? ? 'bg-gray-700 text-white' :
                     current_user.externo? ? 'bg-blue-900 text-blue-200 border border-blue-500' :
                     'bg-gray-900 text-orange-400 border border-orange-500' %>">
      <%= current_user.role_label %>
    </span>
  </div>

  <%# Navegação %>
  <nav class="px-3 py-4 space-y-1 flex-1 overflow-y-auto">

    <%# Dashboard — admin/gerente/operador/externo (todos menos motorista) %>
    <% unless current_user.motorista? %>
      <%= nav_link_to '📊 Dashboard', dashboard_path %>
      <%= nav_link_to '📈 Operações', operacoes_dashboard_path %>
    <% end %>

    <%# Consolidações — só quem pode consolidar (exclui o externo) %>
    <% if current_user.pode_consolidar? %>
      <%= nav_link_to '📦 Consolidações', consolidacoes_path %>
      <%= nav_link_to '📁 Arquivadas', arquivadas_consolidacoes_path %>
    <% end %>

    <%# Motorista %>
    <% if current_user.motorista? %>
      <%= nav_link_to '🏠 Meu Painel', motorista_dashboard_path %>
    <% end %>

    <%# Admin/Gerente — Configurações %>
    <% if current_user.pode_ver_config? %>
      <div class="pt-4 mt-4 border-t border-[#2a2a2a]">
        <p class="px-3 text-xs text-gray-600 uppercase tracking-wider mb-2">Administração</p>
        <%= nav_link_to '👥 Usuários', admin_usuarios_path %>
        <%= nav_link_to '⚙️ Configurações', admin_configuracoes_path %>
        <%= nav_link_to '🔍 Auditoria', admin_auditoria_logs_path %>
        <%= nav_link_to '📥 Planilha SimpliRoute', admin_planilha_simpli_route_path %>
        <% if current_user.admin? %>
          <%= nav_link_to '✏️ Editar Lançamento', admin_edicao_lancamento_path %>
        <% end %>
      </div>
    <% end %>
  </nav>

  <%# Footer da sidebar — sair %>
  <div class="px-6 py-4 border-t border-[#2a2a2a]">
    <%= link_to destroy_user_session_path, data: { turbo_method: :delete, turbo_confirm: 'Deseja sair?' },
        class: "flex items-center gap-2 text-gray-400 hover:text-red-400 text-sm transition-colors" do %>
      <span>🚪</span> Sair
    <% end %>
  </div>
</aside>

<%# Botão flutuante (desktop) — esconde/mostra a sidebar do site inteiro.
    Em repouso mostra uma ALÇA fina laranja (indicador de que dá p/ recolher);
    ao chegar perto com o mouse, ela expande no botão com a seta. %>
<div id="sidebar-edge" class="hidden md:flex group fixed top-1/2 -translate-y-1/2 z-40 h-32 w-12 items-center">
  <button id="sidebar-toggle-btn" type="button" onclick="toggleSidebarCollapse()"
          class="flex items-center justify-center rounded-r-lg shadow-lg transition-all duration-200
                 w-1.5 h-14 bg-orange-500/60 text-transparent
                 group-hover:w-7 group-hover:h-16 group-hover:bg-[#1a1a1a] group-hover:text-orange-500
                 group-hover:border group-hover:border-orange-500/70
                 focus:w-7 focus:h-16 focus:bg-[#1a1a1a] focus:text-orange-500"
          title="Esconder/mostrar menu" aria-label="Esconder ou mostrar o menu">
    <span id="sidebar-toggle-icon" class="text-lg leading-none">◀</span>
  </button>
</div>

<%# Topbar mobile %>
<header class="md:hidden fixed top-0 left-0 right-0 z-30 bg-[#111111] border-b border-[#2a2a2a] px-4 py-3 flex items-center justify-between">
  <button onclick="toggleSidebar()"
          class="text-orange-500 text-2xl min-h-[48px] min-w-[48px] flex items-center justify-center">
    ☰
  </button>
  <div class="flex items-center gap-2">
    <%= image_tag '/logo-reem.png', alt: 'Reem Transporte', class: 'h-8 w-auto object-contain' %>
  </div>
  <div class="w-12"></div>
</header>
<%# Espaço para topbar no mobile %>
<div class="h-14 md:hidden"></div>

<script>
  // Mobile: abre/fecha a sidebar por cima do conteúdo (hamburguer).
  function toggleSidebar() {
    const s = document.getElementById('sidebar');
    const o = document.getElementById('sidebar-overlay');
    s.classList.toggle('-translate-x-full');
    o.classList.toggle('hidden');
  }

  // Desktop: recolhe/expande a sidebar (estado salvo p/ o site inteiro).
  function toggleSidebarCollapse() {
    const collapsed = document.documentElement.classList.toggle('sidebar-collapsed');
    try { localStorage.setItem('sidebarCollapsed', collapsed ? '1' : '0'); } catch (e) {}
    syncSidebarToggleIcon();
  }
  function syncSidebarToggleIcon() {
    const icon = document.getElementById('sidebar-toggle-icon');
    if (icon) icon.textContent =
      document.documentElement.classList.contains('sidebar-collapsed') ? '▶' : '◀';
  }
  syncSidebarToggleIcon();
</script>
