"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Logo } from "./logo";
import { ChartArrow, Lightbulb } from "./icons";
import type { NavLink } from "@/lib/strapi";

const RESOURCES = [
  {
    label: "Impact Stories",
    description: "Outcomes that partnerships have created",
    href: "/resources/impact-stories",
    Icon: ChartArrow,
  },
  {
    label: "Insights",
    description: "Grow with confidence with industry insights",
    href: "/resources/insights",
    Icon: Lightbulb,
  },
];

const NAV_FALLBACK: NavLink[] = [
  { label: "Partner with Us", href: "/partner-with-us" },
  { label: "Contact", href: "/#contact" },
];

function ResourceItem({
  item,
  onClick,
}: {
  item: (typeof RESOURCES)[number];
  onClick?: () => void;
}) {
  const { Icon } = item;
  return (
    <Link
      href={item.href}
      onClick={onClick}
      className="group flex items-start gap-4 rounded-2xl p-3 transition-colors hover:bg-mist"
    >
      <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-leaf/40 bg-wash-green text-leaf-deep transition-colors group-hover:border-leaf">
        <Icon className="h-6 w-6" />
      </span>
      <span>
        <span className="block font-display text-base font-bold text-ink">
          {item.label}
        </span>
        <span className="mt-0.5 block max-w-[15rem] text-sm leading-snug text-muted">
          {item.description}
        </span>
      </span>
    </Link>
  );
}

export function SiteHeader({ navLinks, logo = "" }: { navLinks?: NavLink[]; logo?: string }) {
  const nav = navLinks && navLinks.length > 0 ? navLinks : NAV_FALLBACK;
  const [open, setOpen] = useState(false); // mobile drawer
  const [resOpen, setResOpen] = useState(false); // desktop dropdown
  const [mobileResOpen, setMobileResOpen] = useState(false);

  // The header lives in the root layout and stays mounted across
  // navigations, so its state persists too. The drawer's own links call
  // setOpen(false) on click, but that misses any other way the route can
  // change (browser back/forward, etc.) — closing whenever the pathname
  // itself changes guarantees the drawer never gets stuck open on a new
  // page. Resetting during render (not in a useEffect) is the pattern React
  // recommends for "state that should reset when a prop changes" — it avoids
  // an extra effect-triggered re-render.
  const pathname = usePathname();
  const [lastPathname, setLastPathname] = useState(pathname);
  if (pathname !== lastPathname) {
    setLastPathname(pathname);
    setOpen(false);
    setMobileResOpen(false);
  }

  // Consistent header across all pages: dark nav text on the light background.
  const navLinkClass =
    "font-display text-[0.95rem] font-medium text-ink-soft transition-colors hover:text-leaf-deep";

  return (
    <header className="absolute inset-x-0 top-0 z-50">
      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6 lg:px-10">
        <Logo src={logo} />

        <div className="hidden items-center gap-9 md:flex">
          {/* Resources dropdown */}
          <div
            className="relative"
            onMouseEnter={() => setResOpen(true)}
            onMouseLeave={() => setResOpen(false)}
          >
            <button
              type="button"
              aria-expanded={resOpen}
              onClick={() => setResOpen((v) => !v)}
              className={`flex items-center gap-1.5 ${navLinkClass}`}
            >
              Resources
              <svg
                viewBox="0 0 24 24"
                className={`h-3.5 w-3.5 transition-transform ${
                  resOpen ? "rotate-180" : ""
                }`}
                fill="none"
                aria-hidden
              >
                <path
                  d="m6 9 6 6 6-6"
                  stroke="currentColor"
                  strokeWidth="2.2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>

            <div
              className={`absolute left-1/2 top-full -translate-x-1/2 pt-4 transition-all duration-200 ${
                resOpen
                  ? "visible translate-y-0 opacity-100"
                  : "invisible -translate-y-1 opacity-0"
              }`}
            >
              <div className="grid w-[34rem] grid-cols-2 gap-2 rounded-3xl border-2 border-leaf/50 bg-paper p-3 shadow-lift">
                {RESOURCES.map((item) => (
                  <ResourceItem
                    key={item.label}
                    item={item}
                    onClick={() => setResOpen(false)}
                  />
                ))}
              </div>
            </div>
          </div>

          {nav.map((item) => (
            <Link
              key={item.label}
              href={item.href}
              className={navLinkClass}
            >
              {item.label}
            </Link>
          ))}
        </div>

        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
          className="flex h-10 w-10 items-center justify-center rounded-xl border border-line bg-paper/70 backdrop-blur md:hidden"
        >
          <div className="space-y-1.5">
            <span
              className={`block h-0.5 w-5 bg-ink transition-transform ${
                open ? "translate-y-2 rotate-45" : ""
              }`}
            />
            <span
              className={`block h-0.5 w-5 bg-ink transition-opacity ${
                open ? "opacity-0" : ""
              }`}
            />
            <span
              className={`block h-0.5 w-5 bg-ink transition-transform ${
                open ? "-translate-y-2 -rotate-45" : ""
              }`}
            />
          </div>
        </button>
      </nav>

      {/* Backdrop — closes the drawer on any tap outside it (there was
          previously no way to dismiss it except tapping a link inside). */}
      {open && (
        <div
          className="fixed inset-0 z-40 md:hidden"
          aria-hidden
          onClick={() => setOpen(false)}
        />
      )}

      {/* Mobile drawer */}
      {open && (
        <div className="relative z-50 mx-6 rounded-3xl border border-line bg-paper p-3 shadow-lift md:hidden">
          <button
            type="button"
            onClick={() => setMobileResOpen((v) => !v)}
            aria-expanded={mobileResOpen}
            className="flex w-full items-center justify-between rounded-2xl px-4 py-3 font-display font-medium text-ink-soft hover:bg-mist"
          >
            Resources
            <svg
              viewBox="0 0 24 24"
              className={`h-4 w-4 transition-transform ${
                mobileResOpen ? "rotate-180" : ""
              }`}
              fill="none"
              aria-hidden
            >
              <path
                d="m6 9 6 6 6-6"
                stroke="currentColor"
                strokeWidth="2.2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
          {mobileResOpen && (
            <div className="mb-1 space-y-1 border-l-2 border-line pl-2">
              {RESOURCES.map((item) => (
                <ResourceItem
                  key={item.label}
                  item={item}
                  onClick={() => setOpen(false)}
                />
              ))}
            </div>
          )}

          {nav.map((item) => (
            <Link
              key={item.label}
              href={item.href}
              onClick={() => setOpen(false)}
              className="block rounded-2xl px-4 py-3 font-display font-medium text-ink-soft transition-colors hover:bg-mist hover:text-leaf-deep"
            >
              {item.label}
            </Link>
          ))}
        </div>
      )}
    </header>
  );
}