<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Admin Dashboard" %> - Sanasto Wiki</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body class="bg-slate-50 text-gray-900 font-sans antialiased">
    <div class="min-h-screen flex flex-col">
      <!-- Header -->
      <header class="bg-white border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4">
          <div class="h-16 flex items-center justify-between">
            <%= link_to admin_dashboard_path, class: "flex items-center gap-2" do %>
              <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
              <span class="text-xl font-light text-slate-400">Admin</span>
            <% end %>

            <!-- Desktop Navigation -->
            <nav class="hidden md:flex items-center gap-3">
              <%= link_to "Dashboard", admin_dashboard_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= link_to "Users", admin_users_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= link_to "Invitations", admin_invitations_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <% requested_count = Entry.requested.count %>
              <% gap = requested_count.zero? ? '' : 'pr-4' %>
              <%= link_to admin_requests_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition relative #{gap}" do %>
                Requests
                <% if requested_count > 0 %>
                  <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
                    <%= requested_count %>
                  </span>
                <% end %>
              <% end %>
              <%= link_to "Back to Site", root_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
              <%= button_to "Log Out", logout_path, method: :delete, data: { turbo: false }, form: { style: "display: inline-block;" }, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition cursor-pointer" %>
            </nav>

            <!-- Mobile Navigation -->
            <div class="flex md:hidden items-center gap-3">
              <span class="text-sm text-slate-600">
                <%= current_user.name.split.first %>
              </span>
              <button type="button" id="admin-mobile-menu-button" class="p-2 text-slate-600 hover:text-indigo-600 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
              </button>
            </div>
          </div>

          <!-- Mobile Menu Dropdown -->
          <div id="admin-mobile-menu" class="hidden md:hidden border-t border-slate-200 py-3">
            <div class="py-2 px-2 border-b border-slate-200 mb-2">
              <span class="text-sm font-medium text-slate-900">
                <%= current_user.name %>
              </span>
            </div>

            <nav class="flex flex-col space-y-1">
              <%= link_to "Dashboard", admin_dashboard_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
              <%= link_to "Users", admin_users_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
              <%= link_to "Invitations", admin_invitations_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
              <% requested_count = Entry.requested.count %>
              <%= link_to admin_requests_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition flex items-center justify-between" do %>
                <span>Requests</span>
                <% if requested_count > 0 %>
                  <span class="bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
                    <%= requested_count %>
                  </span>
                <% end %>
              <% end %>
              <%= link_to "Back to Site", root_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
              <%= button_to "Log Out", logout_path, method: :delete, data: { turbo: false }, form: { class: "w-full" }, class: "w-full text-left px-2 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded transition cursor-pointer" %>
            </nav>
          </div>
        </div>
      </header>

      <script>
        function setupAdminMobileMenu() {
          const menuButton = document.getElementById('admin-mobile-menu-button');
          const mobileMenu = document.getElementById('admin-mobile-menu');

          if (menuButton && mobileMenu) {
            // Remove existing listeners to avoid duplicates
            const newMenuButton = menuButton.cloneNode(true);
            menuButton.parentNode.replaceChild(newMenuButton, menuButton);

            newMenuButton.addEventListener('click', function(e) {
              e.stopPropagation();
              mobileMenu.classList.toggle('hidden');
            });

            // Close menu when clicking outside
            document.addEventListener('click', function(event) {
              const isClickInside = newMenuButton.contains(event.target) || mobileMenu.contains(event.target);
              if (!isClickInside && !mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
              }
            });

            // Close menu when navigating with Turbo
            document.addEventListener('turbo:click', function() {
              if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
              }
            });
          }
        }

        // Run on initial load and on Turbo navigation
        document.addEventListener('DOMContentLoaded', setupAdminMobileMenu);
        document.addEventListener('turbo:load', setupAdminMobileMenu);
      </script>

      <!-- Flash messages -->
      <% if flash.any? %>
        <div class="max-w-7xl mx-auto px-4 mt-4">
          <% flash.each do |type, message| %>
            <div class="<%= type == 'notice' ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700' %> px-4 py-3 rounded-lg mb-4 relative" role="alert">
              <span class="block sm:inline pr-8"><%= message %></span>
              <button type="button" class="absolute top-0 right-0 mt-3 mr-3 text-current opacity-50 hover:opacity-100 transition" onclick="this.parentElement.remove()">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
              </button>
            </div>
          <% end %>
        </div>
      <% end %>

      <!-- Main content -->
      <main class="flex-1 max-w-7xl w-full mx-auto px-4 py-8">
        <%= yield %>
      </main>
    </div>
  </body>
</html>
