<!DOCTYPE html>
<html lang="pt-BR" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-param" content="<%= request_forgery_protection_token %>">
  <meta name="csrf-token" content="<%= form_authenticity_token %>">
  <title><%= content_for?(:title) ? "#{yield(:title)} | Reem Logística" : "Reem Logística" %></title>

  <%# Favicon / ícone do app (marca Reem — van laranja) %>
  <link rel="icon" href="/favicon.png" type="image/png">
  <link rel="apple-touch-icon" href="/favicon.png">

  <%# Tailwind via CDN em desenvolvimento — compilar em produção %>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: {
              preto: '#0a0a0a',
              'preto-card': '#1a1a1a',
              laranja: '#f97316',
              'laranja-escuro': '#ea580c',
              branco: '#ffffff',
            }
          }
        }
      }
    }
  </script>

  <%# Google Fonts — Inter %>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <style>
    /* Fonte base maior para conforto de leitura (Tailwind usa rem → escala tudo).
       16px no desktop e 18px no celular, conforme o padrão de design do projeto. */
    html { font-size: 17px; }
    @media (max-width: 767px) { html { font-size: 18px; } }

    body { font-family: 'Inter', sans-serif; -webkit-text-size-adjust: 100%; }
    /* Scrollbar tema escuro */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #0a0a0a; }
    ::-webkit-scrollbar-thumb { background: #f97316; border-radius: 3px; }
    /* Loading spinner laranja */
    .spinner {
      border: 3px solid #1a1a1a;
      border-top-color: #f97316;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* Sidebar recolhível no desktop (botão flutuante esconde/mostra o menu).
       O estado fica na classe .sidebar-collapsed do <html>. */
    @media (min-width: 768px) {
      main, footer { transition: margin-left .3s ease; }
      #sidebar-edge { left: 16rem; transition: left .3s ease; }
      .sidebar-collapsed #sidebar { transform: translateX(-100%); }
      .sidebar-collapsed main, .sidebar-collapsed footer { margin-left: 0; }
      .sidebar-collapsed #sidebar-edge { left: 0; }
    }
  </style>

  <%= javascript_importmap_tags %>
  <%= yield :head %>

  <%# Aplica o estado recolhido da sidebar antes de pintar (evita "piscar") %>
  <script>
    (function () {
      try {
        if (localStorage.getItem('sidebarCollapsed') === '1')
          document.documentElement.classList.add('sidebar-collapsed');
      } catch (e) {}
    })();
  </script>
</head>

<%# overflow-x-hidden: conteúdo largo demais não pode criar scroll horizontal na
    página (aparecia como uma barra laranja "quebrando" o rodapé no celular);
    tabelas largas já rolam nos próprios contêineres overflow-x-auto. %>
<body class="bg-[#0a0a0a] text-white min-h-screen overflow-x-hidden">

  <%# ── Animação de abertura (uma vez, logo após o login) ── %>
  <% if @mostrar_splash %>
    <div id="splash-login"
         class="fixed inset-0 z-[100] bg-[#0a0a0a] flex items-center justify-center"
         onclick="encerrarSplash()">
      <%# mix-blend-screen "derruba" o fundo preto do vídeo: o preto vira a cor do
          overlay e só o logo (pixels claros) aparece, sem a caixa retangular. %>
      <video id="splash-video" autoplay muted playsinline
             style="mix-blend-mode: screen;"
             class="max-w-[90vw] max-h-[90vh] w-auto h-auto object-contain">
        <source src="/login-animacao.webm" type="video/webm">
        <source src="/login-animacao.mp4" type="video/mp4">
      </video>
      <button type="button" onclick="event.stopPropagation(); encerrarSplash()"
              class="absolute bottom-6 right-6 text-gray-400 hover:text-white text-sm border border-white/20 rounded-lg px-4 py-2">
        Pular <%= icone :fechar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
      </button>
    </div>
    <script>
      (function () {
        var splash = document.getElementById('splash-login');
        var video  = document.getElementById('splash-video');
        if (!splash) return;
        window.encerrarSplash = function () {
          splash.style.transition = 'opacity .4s';
          splash.style.opacity = '0';
          setTimeout(function () { splash.remove(); }, 400);
        };
        // Some quando o vídeo termina; fallback de segurança de 8s.
        if (video) video.addEventListener('ended', window.encerrarSplash);
        setTimeout(window.encerrarSplash, 8000);
      })();
    </script>
  <% end %>

  <%# ── Navbar ─────────────────────────────────────────── %>
  <% if user_signed_in? %>
    <%= render 'layouts/navbar' %>
  <% end %>

  <%# ── Flash Messages ─────────────────────────────────── %>
  <% if notice.present? %>
    <div id="flash-notice"
         class="fixed top-4 right-4 z-50 bg-orange-500 text-black font-semibold px-5 py-3 rounded-lg shadow-lg flex items-center gap-2 animate-fade-in"
         data-controller="flash">
      <%= icone :sucesso, cor: nil, tamanho: 'w-6 h-6' %> <%= notice %>
    </div>
  <% end %>

  <% if alert.present? %>
    <div id="flash-alert"
         class="fixed top-4 right-4 z-50 bg-red-600 text-white font-semibold px-5 py-3 rounded-lg shadow-lg flex items-center gap-2"
         data-controller="flash">
      <%= icone :alerta, cor: nil, tamanho: 'w-6 h-6' %> <%= alert %>
    </div>
  <% end %>

  <%# ── Conteúdo principal ──────────────────────────────── %>
  <main class="<%= user_signed_in? ? 'ml-0 md:ml-64 p-4 md:p-8' : '' %> min-h-screen">
    <%= yield %>
  </main>

  <%# ── Rodapé ───────────────────────────────────────────── %>
  <footer class="<%= 'md:ml-64' if user_signed_in? %> border-t border-[#2a2a2a] py-5 px-4 md:px-8 text-center">
    <p class="text-gray-500 text-xs">
      &copy; <%= Date.current.year %>
      <a href="https://victor.paravatti.com.br/" target="_blank" rel="noopener noreferrer"
         class="text-orange-500 font-semibold tracking-wide hover:text-orange-400 transition-colors">VK TECNOLOGIA</a>
      — Todos os direitos reservados.
    </p>
    <p class="text-gray-600 text-xs mt-1">
      Desenvolvido por
      <a href="https://victor.paravatti.com.br/" target="_blank" rel="noopener noreferrer"
         class="text-orange-500 hover:text-orange-400 transition-colors">VK&nbsp;Tecnologia</a>
      · Reem Logística
    </p>
  </footer>

  <%# Auto-hide flash após 4s (JS simples) %>
  <script>
    setTimeout(() => {
      ['flash-notice', 'flash-alert'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.style.transition = 'opacity 0.5s', el.style.opacity = '0',
                setTimeout(() => el.remove(), 500);
      });
    }, 4000);
  </script>

</body>
</html>
