"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const navLinks = [
  { label: "WORK", href: "#work" },
  { label: "CAPABILITIES", href: "#capabilities" },
  { label: "FIELD NOTES", href: "/blog/" },
  { label: "CONTACT", href: "#contact" },
];

function openCommandPalette() {
  window.dispatchEvent(new CustomEvent("blacksite:palette"));
}

export function PortfolioNav() {
  const pathname = usePathname();

  return (
    <nav
      aria-label="Portfolio navigation"
      className="sticky top-3 z-50 mx-auto mt-3 w-[calc(100%-2rem)] max-w-5xl rounded-xl border border-blacksite-line bg-blacksite-surface/82 px-6 py-2 text-blacksite-muted shadow-[0_18px_70px_rgba(0,0,0,0.38)] backdrop-blur-md sm:px-8 lg:px-12"
    >
      <div className="flex items-center justify-between gap-3">
        <Link
          href="/"
          aria-current={pathname === "/" ? "page" : undefined}
          className="section-label whitespace-nowrap !text-blacksite-text transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan aria-[current=page]:!text-signal-cyan"
        >
          KRISHNA / SIGNAL
        </Link>

        <div className="flex min-w-0 flex-1 items-center justify-end gap-1 sm:gap-2">
          <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
            {navLinks.map((link) => {
              const isBlogActive =
                link.href === "/blog/" &&
                (pathname === "/blog" || pathname.startsWith("/blog/"));

              if (link.href.startsWith("/")) {
                return (
                  <Link
                    key={link.href}
                    href={link.href}
                    aria-current={isBlogActive ? "page" : undefined}
                    className="section-label rounded-md px-2 py-2 transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan aria-[current=page]:!text-signal-cyan sm:px-3"
                  >
                    {link.label}
                  </Link>
                );
              }

              return (
                <a
                  key={link.href}
                  href={link.href}
                  className="section-label rounded-md px-2 py-2 transition-colors hover:!text-signal-cyan focus-visible:outline-signal-cyan active:!text-signal-cyan sm:px-3"
                >
                  {link.label}
                </a>
              );
            })}
          </div>

          <button
            type="button"
            onClick={openCommandPalette}
            className="section-label rounded-lg border border-blacksite-line bg-blacksite-surface2 px-3 py-2 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan active:!text-signal-cyan"
            aria-label="Open command palette"
          >
            ⌘K
          </button>
        </div>
      </div>
    </nav>
  );
}