---
import { siteConfig } from "@/config/site";
import ThemeToggle from "@/components/ui/ThemeToggle.astro";
---

<nav
  class="fixed top-0 z-50 w-full border-b border-border bg-background md:bg-background/50 md:backdrop-blur"
>
  <div
    class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8"
  >
    <div class="flex items-center gap-2">
      <a
        href="/"
        class="text-xl font-bold tracking-tight text-foreground transition-colors hover:text-primary"
      >
        {siteConfig.name}
      </a>
    </div>

    <!-- Desktop Menu -->
    <div class="hidden md:block">
      <div class="ml-10 flex items-baseline space-x-8">
        {
          siteConfig.navLinks.map((link) => (
            <a
              href={link.href}
              class="text-sm font-medium text-foreground transition-colors hover:text-primary"
            >
              {link.text}
            </a>
          ))
        }
      </div>
    </div>

    <div class="hidden md:flex items-center gap-4">
      <a
        href={siteConfig.socialLinks.github}
        target="_blank"
        rel="noopener noreferrer"
        class="rounded-full bg-foreground/10 px-4 py-2 text-sm font-semibold text-foreground transition-all hover:bg-foreground/20"
      >
        GitHub
      </a>
      <ThemeToggle />
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button
        id="mobile-menu-button"
        type="button"
        class="inline-flex items-center justify-center p-2 rounded-md text-foreground hover:text-white hover:bg-white/10 focus:outline-none transition-colors"
        aria-controls="mobile-menu"
        aria-expanded="false"
      >
        <span class="sr-only">Open main menu</span>
        <!-- Icon when menu is closed -->
        <svg
          id="menu-icon-closed"
          class="block h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
        <!-- Icon when menu is open -->
        <svg
          id="menu-icon-open"
          class="hidden h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
      <div class="ml-2">
        <ThemeToggle />
      </div>
    </div>
  </div>

  <div class="hidden md:hidden" id="mobile-menu">
    <div
      class="space-y-1 border-b border-border bg-background/90 px-2 pb-3 pt-2 sm:px-3"
    >
      {
        siteConfig.navLinks.map((link) => (
          <a
            href={link.href}
            class="block rounded-md px-3 py-2 text-base font-medium text-foreground transition-colors hover:bg-white/10 hover:text-primary"
          >
            {link.text}
          </a>
        ))
      }
      <a
        href={siteConfig.socialLinks.github}
        target="_blank"
        class="block rounded-md px-3 py-2 text-base font-medium text-blue-400 transition-colors hover:cursor-pointer hover:bg-blue-500/10 hover:text-blue-300"
        >GitHub</a
      >
    </div>
  </div>
</nav>

<script>
  document.addEventListener("astro:page-load", () => {
    const button = document.getElementById("mobile-menu-button");
    const menu = document.getElementById("mobile-menu");
    const iconClosed = document.getElementById("menu-icon-closed");
    const iconOpen = document.getElementById("menu-icon-open");

    // Remove old event listener if it exists to prevent multiple triggers
    const newButton = button?.cloneNode(true);
    if (newButton && button && button.parentNode) {
      button.parentNode.replaceChild(newButton, button);
    }

    const finalButton = document.getElementById("mobile-menu-button");

    finalButton?.addEventListener("click", () => {
      const isExpanded = finalButton.getAttribute("aria-expanded") === "true";

      finalButton.setAttribute("aria-expanded", String(!isExpanded));
      menu?.classList.toggle("hidden");
      iconClosed?.classList.toggle("hidden");
      iconOpen?.classList.toggle("hidden");
    });
  });
</script>
