"use client";

import { useEffect, useState } from "react";

import Link from "next/link";

import { usePathname } from "next/navigation";

import { CustodyMark, Wordmark } from "@/components/custody-mark";

import { DisplayToggle } from "@/components/display-toggle";

import { clsx } from "@/lib/cx";

const NAV: Array<{ href: string; label: string }> = [

  { href: "/",            label: "Home" },

  { href: "/bills",       label: "Bills" },

  { href: "/laws",        label: "Laws" },

  { href: "/votes",       label: "Votes" },

  { href: "/members",     label: "Reps" },

  { href: "/spending",    label: "Spending" },

  { href: "/states",      label: "States" },

];

function isActive(pathname: string | null, href: string): boolean {

  if (href === "/") return pathname === "/";

  return pathname === href || !!pathname?.startsWith(href + "/");

}

export function SiteHeader() {

  const pathname = usePathname();

  const [open, setOpen] = useState(false);

  useEffect(() => { setOpen(false); }, [pathname]);

  useEffect(() => {

    if (!open) return;

    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };

    document.addEventListener("keydown", onKey);

    const prev = document.body.style.overflow;

    document.body.style.overflow = "hidden";

    return () => {

      document.removeEventListener("keydown", onKey);

      document.body.style.overflow = prev;

    };

  }, [open]);

  return (

    <>

      <header

        className="sticky top-0 z-40"

        style={{

          background: "var(--dk-header-bg)",

          borderBottom: "1px solid var(--dk-header-border)",

          backdropFilter: "blur(14px) saturate(120%)",

          WebkitBackdropFilter: "blur(14px) saturate(120%)",

          height: "64px",

          display: "flex",

          alignItems: "center",

        }}

      >

        <div

          className="mx-auto w-full px-4 sm:px-7"

          style={{ maxWidth: "1180px", display: "flex", alignItems: "center", gap: "20px" }}

        >

          {}

          <Link

            href="/"

            className="focus-ring shrink-0 no-underline"

            aria-label="Docket - home"

            style={{ display: "inline-flex", alignItems: "center", gap: "10px", minHeight: "44px" }}

          >

            <CustodyMark size={28} />

            <Wordmark className="font-display text-paper" />

          </Link>

          {}

          <nav

            aria-label="Primary"

            className="hidden md:flex"

            style={{ marginLeft: "12px", gap: "0px" }}

          >

            {NAV.map((item) => {

              const active = isActive(pathname, item.href);

              return (

                <Link

                  key={item.href}

                  href={item.href}

                  aria-current={active ? "page" : undefined}

                  className="focus-ring no-underline"

                  style={{

                    fontFamily: "var(--font-mono), ui-monospace, monospace",

                    fontSize: "12.5px",

                    fontWeight: 400,

                    letterSpacing: "0.13em",

                    textTransform: "uppercase",

                    color: active ? "var(--dk-paper)" : "var(--dk-ash)",

                    display: "inline-flex",

                    alignItems: "center",

                    minHeight: "44px",

                    padding: "0 7px",

                    whiteSpace: "nowrap",

                    borderRadius: "6px",

                    position: "relative",

                    transition: "color 0.2s",

                    textDecoration: "none",

                  }}

                >

                  {item.label}

                  {active && (

                    <span

                      aria-hidden="true"

                      style={{

                        position: "absolute",

                        left: "7px",

                        right: "7px",

                        bottom: "2px",

                        height: "2px",

                        background: "var(--dk-signal)",

                        borderRadius: "2px",

                        boxShadow: "0 0 8px rgba(224,165,59,0.45)",

                      }}

                    />

                  )}

                </Link>

              );

            })}

          </nav>

          {}

          <div

            className="flex items-center"

            style={{ marginLeft: "auto", gap: "8px" }}

          >

            {}

            <Link

              href="/search"

              aria-label="Search Docket"

              className="focus-ring no-underline tap"

              style={{

                display: "inline-flex",

                alignItems: "center",

                gap: "7px",

                padding: "0 12px",

                height: "36px",

                border: "1px solid var(--dk-line)",

                borderRadius: "8px",

                background: "transparent",

                color: "var(--dk-ash)",

                fontFamily: "var(--font-mono), ui-monospace, monospace",

                fontSize: "12.5px",

                letterSpacing: "0.12em",

                textTransform: "uppercase",

                transition: "border-color 0.2s, color 0.2s",

              }}

            >

              <SearchIcon />

              <span className="hidden lg:inline">Search</span>

            </Link>

            <DisplayToggle />

            {}

            <button

              type="button"

              onClick={() => setOpen((v) => !v)}

              aria-label={open ? "Close menu" : "Open menu"}

              aria-expanded={open}

              aria-controls="primary-mobile-nav"

              className="focus-ring md:hidden"

              style={{

                display: "flex",

                alignItems: "center",

                justifyContent: "center",

                flexDirection: "column",

                gap: "4px",

                width: "44px",

                height: "44px",

                border: "1px solid var(--dk-line)",

                borderRadius: "8px",

                background: "transparent",

                cursor: "pointer",

              }}

            >

              <BurgerIcon open={open} />

            </button>

          </div>

        </div>

      </header>

      {}

      {open && (

        <>

          {}

          <div

            role="presentation"

            className="fixed inset-0 z-[99] md:hidden"

            style={{ background: "rgba(6,7,9,0.6)", backdropFilter: "blur(4px)" }}

            onClick={() => setOpen(false)}

          />

          {}

          <div

            id="primary-mobile-nav"

            className="fixed top-0 bottom-0 right-0 z-[100] md:hidden"

            style={{

              width: "min(82vw, 340px)",

              background: "var(--dk-surface)",

              borderLeft: "1px solid var(--dk-line)",

              paddingTop: "calc(64px + 16px)",

              paddingLeft: "24px",

              paddingRight: "24px",

              paddingBottom: "28px",

              display: "flex",

              flexDirection: "column",

              gap: "4px",

              overflowY: "auto",

              boxShadow: "-30px 0 60px -20px rgba(0,0,0,0.7)",

            }}

            role="dialog"

            aria-label="Primary navigation"

            aria-modal="true"

          >

            <nav aria-label="Primary mobile">

              <ul style={{ display: "flex", flexDirection: "column", gap: "0" }}>

                {NAV.map((item) => {

                  const active = isActive(pathname, item.href);

                  return (

                    <li key={item.href}>

                      <Link

                        href={item.href}

                        aria-current={active ? "page" : undefined}

                        className="focus-ring no-underline"

                        style={{

                          display: "flex",

                          alignItems: "center",

                          justifyContent: "space-between",

                          fontFamily: "var(--font-mono), ui-monospace, monospace",

                          fontSize: "14px",

                          letterSpacing: "0.12em",

                          textTransform: "uppercase",

                          color: active ? "var(--dk-paper)" : "var(--dk-ash)",

                          padding: "14px 4px",

                          borderBottom: "1px solid rgba(155,160,166,0.10)",

                          paddingLeft: active ? "12px" : "4px",

                          borderLeft: active ? "2px solid var(--dk-signal)" : "2px solid transparent",

                          transition: "color 0.2s",

                          textDecoration: "none",

                        }}

                      >

                        {item.label}

                      </Link>

                    </li>

                  );

                })}

                {}

                <li>

                  <Link

                    href="/search"

                    className="focus-ring no-underline"

                    style={{

                      display: "flex",

                      alignItems: "center",

                      gap: "12px",

                      fontFamily: "var(--font-mono), ui-monospace, monospace",

                      fontSize: "14px",

                      letterSpacing: "0.12em",

                      textTransform: "uppercase",

                      color: "var(--dk-ash)",

                      padding: "14px 4px",

                      borderBottom: "1px solid rgba(155,160,166,0.10)",

                      marginTop: "12px",

                      textDecoration: "none",

                    }}

                  >

                    <SearchIcon />

                    Search

                  </Link>

                </li>

              </ul>

            </nav>

          </div>

        </>

      )}

    </>

  );

}

function SearchIcon() {

  return (

    <svg

      aria-hidden="true"

      width="16"

      height="16"

      viewBox="0 0 16 16"

      fill="none"

      stroke="currentColor"

      strokeWidth="1.5"

      strokeLinecap="round"

      strokeLinejoin="round"

      style={{ flexShrink: 0 }}

    >

      <circle cx="6.5" cy="6.5" r="4.5" />

      <line x1="10.5" y1="10.5" x2="14" y2="14" />

    </svg>

  );

}

function BurgerIcon({ open }: { open: boolean }) {

  return (

    <>

      <span

        style={{

          display: "block",

          width: "18px",

          height: "2px",

          background: "var(--dk-paper)",

          borderRadius: "2px",

          transform: open ? "translateY(6px) rotate(45deg)" : "none",

          transition: "transform 0.25s",

        }}

      />

      <span

        style={{

          display: "block",

          width: "18px",

          height: "2px",

          background: "var(--dk-paper)",

          borderRadius: "2px",

          opacity: open ? 0 : 1,

          transition: "opacity 0.2s",

        }}

      />

      <span

        style={{

          display: "block",

          width: "18px",

          height: "2px",

          background: "var(--dk-paper)",

          borderRadius: "2px",

          transform: open ? "translateY(-6px) rotate(-45deg)" : "none",

          transition: "transform 0.25s",

        }}

      />

    </>

  );

}