"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronDown, Menu, X } from "@/components/ui/icons";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { Logo } from "@/components/brand/logo";
import { Button } from "@/components/ui/button";

type NavChild = { href: string; label: string; description?: string };
type NavItem = {
  href: string;
  label: string;
  end?: boolean;
  children?: NavChild[];
};

const NAV_ITEMS: NavItem[] = [
  { href: "/essentiel", label: "L'essentiel" },
  {
    href: "/expertises",
    label: "Expertises",
    children: [
      {
        href: "/expertises/site-internet",
        label: "Site internet",
        description: "Vitrines sur-mesure, performance et design soignés",
      },
      {
        href: "/expertises/seo-geo",
        label: "Référencement SEO & GEO",
        description: "Visibilité Google et citations IA (ChatGPT, Perplexity)",
      },
      {
        href: "/expertises/e-commerce",
        label: "E-commerce",
        description: "Boutiques en ligne taillées pour convertir",
      },
    ],
  },
  { href: "/realisations", label: "Réalisations" },
  { href: "/tarifs", label: "Tarifs" },
  { href: "/contact", label: "Contact" },
];

export function MarketingNavbar() {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();
  useEffect(() => {
    setOpen(false);
  }, [pathname]);
  return (
    <header className="sticky top-4 z-40 px-4 pt-4">
      <div className="mx-auto max-w-4xl">
        <div className="rounded-2xl border border-border bg-surface/80 backdrop-blur-xl shadow-[var(--shadow-navbar-float)]">
          <div className="flex items-center justify-between h-14 px-5">
            <Link href="/" className="flex items-center" aria-label="Accueil">
              <Logo bordered />
            </Link>

            {/* Desktop nav */}
            <nav className="hidden md:flex items-center gap-0.5 absolute left-1/2 -translate-x-1/2">
              {NAV_ITEMS.map((item) =>
                item.children ? (
                  <NavDropdown key={item.href} item={item} />
                ) : (
                  <NavLink key={item.href} {...item} />
                ),
              )}
            </nav>

            <div className="hidden md:flex items-center gap-2">
              <Link href="/connexion">
                <Button variant="primary" size="sm">Connexion</Button>
              </Link>
            </div>

            {/* Mobile burger */}
            <button
              type="button"
              onClick={() => setOpen((v) => !v)}
              aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
              className="md:hidden size-9 inline-flex items-center justify-center rounded-md text-text-muted hover:text-text hover:bg-stone-900/[0.05] cursor-pointer"
            >
              {open ? <X className="size-5" /> : <Menu className="size-5" />}
            </button>
          </div>
        </div>

        {/* Mobile menu (en dessous, dans une pill séparée) */}
        {open && (
          <div className="md:hidden mt-2 rounded-2xl border border-border bg-surface/95 backdrop-blur-xl shadow-[var(--shadow-navbar-float)]">
            <nav className="px-4 py-3 flex flex-col gap-1">
              {NAV_ITEMS.map((item) =>
                item.children ? (
                  <MobileGroup key={item.href} item={item} onNavigate={() => setOpen(false)} />
                ) : (
                  <NavLink key={item.href} {...item} mobile onClick={() => setOpen(false)} />
                ),
              )}
              <div className="mt-2 pt-3 border-t border-border">
                <Link href="/connexion" onClick={() => setOpen(false)}>
                  <Button variant="primary" size="md" className="w-full">Connexion</Button>
                </Link>
              </div>
            </nav>
          </div>
        )}
      </div>
    </header>
  );
}

function NavLink({
  href,
  label,
  end,
  mobile,
  onClick,
}: {
  href: string;
  label: string;
  end?: boolean;
  mobile?: boolean;
  onClick?: () => void;
}) {
  const pathname = usePathname();
  const active = end ? pathname === href : pathname.startsWith(href);
  return (
    <Link
      href={href}
      onClick={onClick}
      className={cn(
        "relative px-3 py-2 text-sm font-medium rounded-md transition-colors",
        mobile && "py-3 text-base",
        active ? "text-text" : "text-text-muted hover:text-text",
      )}
    >
      {label}
      {active && !mobile && (
        <span className="absolute left-3 right-3 -bottom-px h-px bg-accent" />
      )}
      {active && mobile && (
        <span className="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-0.5 bg-accent rounded-r" />
      )}
    </Link>
  );
}

function NavDropdown({ item }: { item: NavItem }) {
  const pathname = usePathname();
  const active = pathname.startsWith(item.href);
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    if (!open) return;
    const onPointerDown = (e: PointerEvent) => {
      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

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

  const cancelClose = () => {
    if (closeTimer.current) {
      clearTimeout(closeTimer.current);
      closeTimer.current = null;
    }
  };
  const scheduleClose = () => {
    cancelClose();
    closeTimer.current = setTimeout(() => setOpen(false), 120);
  };

  return (
    <div
      ref={containerRef}
      className="relative"
      onMouseEnter={() => {
        cancelClose();
        setOpen(true);
      }}
      onMouseLeave={scheduleClose}
    >
      <button
        type="button"
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen((v) => !v)}
        className={cn(
          "relative inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-md transition-colors cursor-pointer",
          active ? "text-text" : "text-text-muted hover:text-text",
        )}
      >
        {item.label}
        <ChevronDown
          className={cn(
            "size-3.5 transition-transform",
            open && "rotate-180",
          )}
        />
        {active && (
          <span className="absolute left-3 right-6 -bottom-px h-px bg-accent" />
        )}
      </button>

      <div
        className={cn(
          "absolute left-1/2 -translate-x-1/2 top-full pt-3 w-[22rem] max-w-[calc(100vw-2rem)] transition-all duration-150",
          open
            ? "opacity-100 visible translate-y-0"
            : "opacity-0 invisible translate-y-1",
        )}
        role="menu"
      >
        <div className="rounded-2xl border border-border bg-surface/95 backdrop-blur-xl shadow-[var(--shadow-lg)] p-2">
          {item.children?.map((child) => (
            <Link
              key={child.href}
              href={child.href}
              role="menuitem"
              onClick={() => setOpen(false)}
              className="block rounded-xl px-3 py-2.5 hover:bg-stone-900/[0.04] transition-colors"
            >
              <div className="text-sm font-medium text-text">{child.label}</div>
              {child.description && (
                <div className="mt-0.5 text-xs text-text-muted leading-relaxed">
                  {child.description}
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}

function MobileGroup({ item, onNavigate }: { item: NavItem; onNavigate: () => void }) {
  const pathname = usePathname();
  const active = pathname.startsWith(item.href);
  const [expanded, setExpanded] = useState(active);
  return (
    <div className="flex flex-col">
      <button
        type="button"
        onClick={() => setExpanded((v) => !v)}
        className={cn(
          "relative flex items-center justify-between px-3 py-3 text-base font-medium rounded-md transition-colors",
          active ? "text-text" : "text-text-muted hover:text-text",
        )}
      >
        <span>{item.label}</span>
        <ChevronDown className={cn("size-4 transition-transform", expanded && "rotate-180")} />
        {active && (
          <span className="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-0.5 bg-accent rounded-r" />
        )}
      </button>
      {expanded && (
        <div className="ml-3 pl-3 border-l border-border flex flex-col gap-0.5 py-1">
          {item.children?.map((child) => (
            <Link
              key={child.href}
              href={child.href}
              onClick={onNavigate}
              className="px-3 py-2 text-sm text-text-muted hover:text-text rounded-md transition-colors"
            >
              {child.label}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}