"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import * as NavigationMenu from "@radix-ui/react-navigation-menu";
import { ChevronDown, Menu, X } from "lucide-react";
import { Logo } from "@/components/patterns/Logo";
import { LinkButton } from "@/components/ui/LinkButton";
import { primaryNav } from "@/design-system/navigation";
import { cn } from "@/lib/utils";

/**
 * Primary navigation — Sprint 2 §02/§03.
 * Exactly five top-level items plus a persistent dual CTA; two items ("Who We
 * Serve", "Investors & Partners") expand into audience-segmented mega menus.
 */
export function Navbar() {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const pathname = usePathname();

  function isItemActive(item: (typeof primaryNav)[number]) {
    if (item.href) return pathname === item.href;
    if (!item.columns) return false;
    return item.columns.some((col) =>
      col.links.some((link) => pathname.startsWith("/" + link.href.split("/")[1]))
    );
  }

  return (
    <header className="sticky top-0 z-40 border-b border-line bg-paper/95 shadow-1 backdrop-blur">
      <div className="container flex h-18 items-center justify-between">
        <Logo />

        <NavigationMenu.Root className="relative hidden lg:block" delayDuration={100}>
          <NavigationMenu.List className="flex items-center gap-1">
            {primaryNav.map((item) => {
              const active = isItemActive(item);
              return (
              <NavigationMenu.Item key={item.label}>
                {item.columns ? (
                  <>
                    <NavigationMenu.Trigger
                      className={cn(
                        "group relative flex items-center gap-1 rounded px-3.5 py-2 text-body-sm font-medium text-ink-soft outline-none transition-colors hover:text-primary data-[state=open]:text-primary",
                        active && "text-primary"
                      )}
                    >
                      {item.label}
                      <ChevronDown
                        className="size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180"
                        aria-hidden="true"
                      />
                      {active && (
                        <span className="absolute inset-x-3.5 -bottom-px h-0.5 rounded-full bg-accent" aria-hidden="true" />
                      )}
                    </NavigationMenu.Trigger>
                    <NavigationMenu.Content className="absolute left-0 top-full w-screen max-w-3xl border border-line bg-paper shadow-3 data-[motion=from-start]:animate-fade-up">
                      <div
                        className={cn(
                          "grid gap-8 p-8",
                          item.columns.length > 2 ? "grid-cols-4" : "grid-cols-2"
                        )}
                      >
                        {item.columns.map((col) => (
                          <div key={col.heading}>
                            <p className="text-label mb-3 font-semibold uppercase text-slate">{col.heading}</p>
                            <ul className="flex flex-col gap-2.5">
                              {col.links.map((link) => (
                                <li key={link.href}>
                                  <NavigationMenu.Link asChild>
                                    <Link
                                      href={link.href}
                                      className="text-body-sm text-ink-soft transition-colors hover:text-primary"
                                    >
                                      {link.label}
                                    </Link>
                                  </NavigationMenu.Link>
                                </li>
                              ))}
                            </ul>
                          </div>
                        ))}
                        {item.featured && (
                          <div className="col-span-full border-t border-line pt-5">
                            <Link
                              href={item.featured.href}
                              className="group/feat flex items-baseline justify-between gap-4"
                            >
                              <span>
                                <span className="text-body-sm font-semibold text-ink group-hover/feat:text-primary">
                                  {item.featured.label}
                                </span>
                                <span className="ml-3 text-body-sm text-slate">{item.featured.description}</span>
                              </span>
                            </Link>
                          </div>
                        )}
                      </div>
                    </NavigationMenu.Content>
                  </>
                ) : (
                  <NavigationMenu.Link asChild>
                    <Link
                      href={item.href!}
                      className={cn(
                        "relative block rounded px-3.5 py-2 text-body-sm font-medium text-ink-soft transition-colors hover:text-primary",
                        active && "text-primary"
                      )}
                    >
                      {item.label}
                      {active && (
                        <span className="absolute inset-x-3.5 -bottom-px h-0.5 rounded-full bg-accent" aria-hidden="true" />
                      )}
                    </Link>
                  </NavigationMenu.Link>
                )}
              </NavigationMenu.Item>
              );
            })}
          </NavigationMenu.List>
          <NavigationMenu.Viewport className="absolute left-0 top-full flex justify-start" />
        </NavigationMenu.Root>

        <div className="hidden items-center gap-3 lg:flex">
          <Link href="/portal" className="text-body-sm text-slate hover:text-primary">
            Portal Login
          </Link>
          <LinkButton href="/apply/organization" variant="secondary" size="sm">
            Apply to Raise
          </LinkButton>
          <LinkButton href="/apply/investor-or-partner" variant="primary" size="sm">
            Apply as Investor
          </LinkButton>
        </div>

        <button
          type="button"
          className="p-2 lg:hidden"
          aria-label={mobileOpen ? "Close menu" : "Open menu"}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((v) => !v)}
        >
          {mobileOpen ? <X className="size-6" /> : <Menu className="size-6" />}
        </button>
      </div>

      {mobileOpen && (
        <div className="border-t border-line bg-paper px-5 py-6 lg:hidden">
          <ul className="flex flex-col gap-1">
            {primaryNav.map((item) => (
              <li key={item.label}>
                {item.href ? (
                  <Link href={item.href} className="block py-2.5 text-body-md text-ink">
                    {item.label}
                  </Link>
                ) : (
                  <details className="group">
                    <summary className="flex cursor-pointer items-center justify-between py-2.5 text-body-md text-ink">
                      {item.label}
                      <ChevronDown className="size-4 transition-transform group-open:rotate-180" />
                    </summary>
                    <div className="flex flex-col gap-3 pb-3 pl-3">
                      {item.columns?.flatMap((c) => c.links).map((link) => (
                        <Link key={link.href} href={link.href} className="text-body-sm text-slate">
                          {link.label}
                        </Link>
                      ))}
                    </div>
                  </details>
                )}
              </li>
            ))}
          </ul>
          <div className="mt-5 flex flex-col gap-3 border-t border-line pt-5">
            <LinkButton href="/apply/organization" variant="secondary" size="md" className="w-full justify-center">
              Apply to Raise
            </LinkButton>
            <LinkButton href="/apply/investor-or-partner" variant="primary" size="md" className="w-full justify-center">
              Apply as Investor
            </LinkButton>
          </div>
        </div>
      )}
    </header>
  );
}