"use client";

import Link from "next/link";
import { useEffect, useId, useState } from "react";
import { AuthTrigger } from "@/components/landing/auth-trigger";

const NAV_LINKS = [
  { href: "#features", label: "Platform" },
  { href: "#solutions", label: "Websites" },
  { href: "/discover", label: "Studios" },
  { href: "#security", label: "Security" },
] as const;

export function LandingHeader() {
  const [open, setOpen] = useState(false);
  const panelId = useId();

  useEffect(() => {
    if (!open) return;

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

    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKeyDown);

    return () => {
      document.body.style.overflow = previous;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [open]);

  function close() {
    setOpen(false);
  }

  return (
    <header className="relative z-30 mx-auto w-full max-w-7xl px-[max(1.25rem,env(safe-area-inset-left))] pr-[max(1.25rem,env(safe-area-inset-right))] pt-[max(1.25rem,env(safe-area-inset-top))] pb-5 lg:px-10">
      <div className="flex items-center justify-between gap-4">
        <Link href="/" className="flex items-center gap-2.5" onClick={close}>
          <ArchMark />
          <span className="font-[family-name:var(--font-display)] text-lg font-bold tracking-[0.2em]">
            ARCHI
          </span>
        </Link>

        <nav className="hidden items-center gap-7 text-[13px] font-medium text-white/75 lg:flex">
          {NAV_LINKS.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="transition hover:text-white"
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2 sm:gap-3">
          <AuthTrigger
            view="login"
            className="hidden text-[13px] font-medium text-white/85 transition hover:text-white sm:inline"
          >
            Login
          </AuthTrigger>
          <AuthTrigger
            view="register"
            className="hidden items-center gap-2 rounded-lg bg-[var(--archi-gold)] px-3.5 py-2 text-[13px] font-semibold text-[var(--archi-dark)] transition hover:bg-[var(--archi-gold-bright)] sm:inline-flex"
          >
            Start your studio
            <ArrowRight />
          </AuthTrigger>

          <button
            type="button"
            className={`archi-hamburger lg:hidden ${open ? "is-open" : ""}`}
            aria-expanded={open}
            aria-controls={panelId}
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen((value) => !value)}
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </div>

      <div
        id={panelId}
        className={`archi-mobile-nav lg:hidden ${open ? "is-open" : ""}`}
        aria-hidden={!open}
      >
        <div
          className="archi-mobile-nav-backdrop"
          onClick={close}
          aria-hidden
        />
        <div className="archi-mobile-nav-panel" role="dialog" aria-modal="true">
          <nav className="flex flex-col gap-1 pt-2">
            {NAV_LINKS.map((link, index) => (
              <Link
                key={link.href}
                href={link.href}
                className="archi-mobile-nav-link"
                style={{ transitionDelay: open ? `${80 + index * 45}ms` : "0ms" }}
                onClick={close}
              >
                {link.label}
              </Link>
            ))}
          </nav>

          <div
            className="archi-mobile-nav-actions"
            style={{ transitionDelay: open ? "280ms" : "0ms" }}
          >
            <AuthTrigger
              view="login"
              className="inline-flex w-full items-center justify-center rounded-xl border border-white/15 px-4 py-3 text-sm font-medium text-white"
              onClick={close}
            >
              Login
            </AuthTrigger>
            <AuthTrigger
              view="register"
              className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--archi-gold)] px-4 py-3 text-sm font-semibold text-[var(--archi-dark)]"
              onClick={close}
            >
              Start your studio
              <ArrowRight />
            </AuthTrigger>
          </div>
        </div>
      </div>
    </header>
  );
}

function ArchMark({ className = "h-6 w-6" }: { className?: string }) {
  return (
    <svg viewBox="0 0 32 32" className={className} aria-hidden fill="none">
      <path
        d="M16 3L28 28H22.5L19.7 21.2H12.3L9.5 28H4L16 3Z"
        fill="var(--archi-gold)"
      />
      <path d="M13.4 18.2H18.6L16 12.2L13.4 18.2Z" fill="var(--archi-dark)" />
    </svg>
  );
}

function ArrowRight({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden fill="none">
      <path
        d="M3 8h10M9 4l4 4-4 4"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
