// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * Navigation d'en-tête. Le menu mobile utilise le motif checkbox + peer-checked :
 * il s'ouvre et se ferme en PUR CSS — fonctionne même sans JavaScript (cache
 * périmé, hydratation cassée, JS bloqué). Le JS n'est qu'une amélioration
 * (fermeture au changement de page, verrou de défilement).
 */
"use client";
import { useEffect, useRef } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLang } from "./LangContext";

export default function HeaderNav() {
  const { lang, setLang } = useLang();
  const path = usePathname();
  const fr = lang === "fr";
  const box = useRef<HTMLInputElement>(null);

  // améliorations JS (facultatives) : fermer à la navigation, verrouiller le scroll
  useEffect(() => {
    if (box.current) box.current.checked = false;
    document.body.style.overflow = "";
  }, [path]);
  const onToggle = () => {
    document.body.style.overflow = box.current?.checked ? "hidden" : "";
  };

  const items = [
    { href: "/", label: fr ? "Estimer" : "Estimate" },
    { href: "/ka", label: fr ? "Ka · agent IA" : "Ka · AI agent" },
    { href: "/parc", label: fr ? "Parc immobilier" : "Portfolio" },
    { href: "/stats", label: fr ? "Statistiques" : "Statistics" },
    { href: "/methodologie", label: fr ? "Méthodologie" : "Methodology" },
  ];
  const isActive = (href: string) =>
    href === "/" ? path === "/" : path.startsWith(href);

  return (
    <>
      {/* nav pilule — desktop */}
      <nav className="hidden items-center gap-1 md:flex">
        {items.map((it) => (
          <Link
            key={it.href}
            href={it.href}
            className={`vp-display inline-flex min-h-[38px] items-center rounded-full border-[1.5px] px-3.5 py-1.5 text-[13.5px] font-bold transition-all ${
              isActive(it.href)
                ? "border-ink bg-ink text-lime"
                : "border-transparent text-ink-2 hover:border-ink hover:text-ink"
            }`}
          >
            {it.label}
          </Link>
        ))}
      </nav>

      {/* ---- menu mobile : checkbox cachée + peer-checked, zéro JS requis ---- */}
      <div className="md:hidden">
        <input
          ref={box}
          type="checkbox"
          id="vp-menu"
          className="peer sr-only"
          onChange={onToggle}
          aria-label="Menu"
        />
        {/* hamburger (label = bouton) */}
        <label
          htmlFor="vp-menu"
          aria-hidden="true"
          className="flex h-11 w-11 cursor-pointer flex-col items-center justify-center gap-[5px] rounded-full border-[1.5px] border-ink bg-surface active:bg-lime-soft"
        >
          <span className="h-[2px] w-[18px] bg-ink" />
          <span className="h-[2px] w-[18px] bg-ink" />
          <span className="h-[2px] w-[18px] bg-ink" />
        </label>

        {/* panneau plein écran — sibling du checkbox, affiché via peer-checked */}
        <div
          className="fixed inset-0 z-[3000] hidden flex-col overflow-y-auto peer-checked:flex"
          style={{ background: "var(--paper)" }}
          role="dialog"
          aria-modal="true"
          aria-label="Menu"
        >
          {/* barre du haut : marque + fermer */}
          <div
            className="flex h-16 shrink-0 items-center justify-between border-b-2 border-ink px-4"
            style={{ background: "var(--paper)" }}
          >
            <Link
              href="/"
              className="vp-display flex items-center text-[22px] font-bold leading-none tracking-[-0.04em]"
            >
              Valo
              <span className="ml-1 rotate-[-2deg] rounded-md bg-ink px-[7px] pb-1 pt-[2px] text-lime">
                Plex
              </span>
            </Link>
            <label
              htmlFor="vp-menu"
              aria-label={fr ? "Fermer le menu" : "Close menu"}
              className="vp-display flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border-[1.5px] border-ink bg-ink text-[17px] font-bold text-lime"
            >
              ✕
            </label>
          </div>

          {/* liens géants */}
          <nav className="flex flex-1 flex-col justify-center px-6 py-8">
            {items.map((it, i) => (
              <Link
                key={it.href}
                href={it.href}
                className="group flex items-baseline gap-4 border-b-[1.5px] border-dashed border-[rgba(20,24,20,0.18)] py-5 last:border-0"
              >
                <span className="vp-mono text-[12px] font-bold text-green">
                  0{i + 1}
                </span>
                <span
                  className={`vp-display text-[29px] font-bold uppercase leading-none tracking-[-0.03em] ${
                    isActive(it.href)
                      ? "rounded-md bg-ink px-2.5 py-1 text-lime"
                      : "text-ink group-active:text-green-deep"
                  }`}
                >
                  {it.label}
                </span>
              </Link>
            ))}
          </nav>

          {/* pied du menu */}
          <div className="shrink-0 border-t-2 border-ink px-6 pb-[max(20px,env(safe-area-inset-bottom))] pt-4">
            <button
              onClick={() => setLang(fr ? "en" : "fr")}
              className="vp-mono mb-3 rounded-full border-[1.5px] border-ink bg-surface px-4 py-2 text-[12px] font-bold uppercase tracking-[0.08em]"
            >
              {fr ? "English version" : "Version française"}
            </button>
            <div className="vp-mono flex flex-wrap gap-x-5 gap-y-1.5 text-[10.5px] uppercase tracking-[0.06em] text-ink-3">
              <Link href="/conditions">{fr ? "Conditions" : "Terms"}</Link>
              <Link href="/confidentialite">
                {fr ? "Confidentialité" : "Privacy"}
              </Link>
              <span>contact@spboucher.ai</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}