---
import { Image } from 'astro:assets';
import ThemeToggle from './ThemeToggle.astro';
import Search from './Search.astro';
import squadLogo from '../assets/images/squad-logo.png';
const base = import.meta.env.BASE_URL;
const pathname = Astro.url.pathname;
const isDocsActive = pathname.startsWith(`${base}docs/`);
const isBlogActive = pathname.startsWith(`${base}blog/`);

const navBase = "px-3 py-1.5 rounded-md transition-colors";
const navInactive = "text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800";
const navActive = "text-squad-700 dark:text-squad-300 bg-squad-50 dark:bg-squad-900/30 font-medium";

const mobileNavBase = "block px-3 py-2 rounded-md text-base transition-colors";
---

<header class="sticky top-0 z-40 w-full border-b border-surface-200 dark:border-surface-800 bg-white/80 dark:bg-surface-950/80 backdrop-blur-lg">
  <div class="flex h-14 items-center px-4 lg:px-6">
    <!-- Mobile menu button -->
    <button
      id="mobile-nav-toggle"
      class="md:hidden p-2 -ml-2 mr-2 rounded-lg text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
      aria-label="Toggle menu"
    >
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <!-- Sidebar toggle (docs pages only, hidden on mobile when mobile-nav is visible) -->
    <button
      id="sidebar-toggle"
      class="hidden p-2 -ml-2 mr-2 rounded-lg text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
      aria-label="Toggle sidebar"
    >
      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <!-- Logo -->
    <a href={base} class="flex items-center gap-2 font-semibold text-surface-900 dark:text-white mr-6">
      <Image src={squadLogo} alt="Squad" class="h-7 w-7" />
      <span class="text-lg">Squad</span>
    </a>

    <!-- Top nav links (desktop) -->
    <nav class="hidden md:flex items-center gap-1 text-base" data-pagefind-ignore>
      <a href={`${base}docs/get-started/installation/`} class:list={[navBase, isDocsActive ? navActive : navInactive]}>Docs</a>
      <a href={`${base}blog/`} class:list={[navBase, isBlogActive ? navActive : navInactive]}>Blog</a>
      <a href="https://github.com/bradygaster/squad" class:list={[navBase, navInactive]} target="_blank" rel="noopener">GitHub</a>
    </nav>

    <!-- Right side -->
    <div class="ml-auto flex items-center gap-2">
      <Search />
      <ThemeToggle />
      <a
        href="https://github.com/bradygaster/squad"
        target="_blank"
        rel="noopener"
        class="hidden sm:flex p-2 rounded-lg text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
        aria-label="GitHub"
      >
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
        </svg>
      </a>
    </div>
  </div>

  <!-- Mobile nav dropdown -->
  <nav id="mobile-nav" class="hidden md:hidden border-t border-surface-200 dark:border-surface-800 bg-white dark:bg-surface-950" data-pagefind-ignore>
    <div class="px-4 py-3 space-y-1">
      <a href={`${base}docs/get-started/installation/`} class:list={[mobileNavBase, isDocsActive ? navActive : navInactive]}>Docs</a>
      <a href={`${base}blog/`} class:list={[mobileNavBase, isBlogActive ? navActive : navInactive]}>Blog</a>
      <a href="https://github.com/bradygaster/squad" class:list={[mobileNavBase, navInactive]} target="_blank" rel="noopener">GitHub</a>
    </div>
  </nav>
</header>

<script>
  const mobileNavToggle = document.getElementById('mobile-nav-toggle');
  const mobileNav = document.getElementById('mobile-nav');
  const sidebarToggle = document.getElementById('sidebar-toggle');
  const sidebar = document.getElementById('sidebar');

  // If there's a sidebar on the page (docs layout), the mobile hamburger also opens it
  if (sidebar && mobileNavToggle) {
    mobileNavToggle.addEventListener('click', () => {
      const overlay = document.getElementById('sidebar-overlay');
      if (sidebar.classList.contains('-translate-x-full')) {
        sidebar.classList.remove('-translate-x-full');
        overlay?.classList.remove('hidden');
      } else {
        sidebar.classList.add('-translate-x-full');
        overlay?.classList.add('hidden');
      }
    });
  } else if (mobileNavToggle) {
    // Non-docs pages: toggle mobile nav dropdown
    mobileNavToggle.addEventListener('click', () => {
      mobileNav?.classList.toggle('hidden');
    });
  }
</script>
