"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, X } from "lucide-react";
import BrandLogo from "@/components/BrandLogo";

/** El panel admin tiene su propia navegación. */
function isAdminRoute(pathname: string | null): boolean {
  if (!pathname) return false;
  return pathname.startsWith("/admin") || pathname.startsWith("/web/");
}

export default function HeaderClient({
  contactUrl,
  resultsEnabled,
  merchEnabled = false,
}: {
  contactUrl?: string | null;
  resultsEnabled?: boolean;
  merchEnabled?: boolean;
}) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  if (isAdminRoute(pathname)) return null;

  const links: { href: string; label: string; external?: boolean }[] = [
    { href: "/#premio", label: "El premio" },
    { href: "/#causa", label: "La causa" },
    { href: "/#boletos", label: "Boletos" },
    { href: "/#transparencia", label: "Transparencia" },
    { href: "/bases", label: "Bases" },
    ...(resultsEnabled ? [{ href: "/#resultados", label: "Resultados" }] : []),
    ...(merchEnabled ? [{ href: "/#merch", label: "Tienda" }] : []),
    { href: "/buscador", label: "Verificar" },
    ...(contactUrl?.trim() ? [{ href: contactUrl.trim(), label: "Contacto", external: true }] : []),
  ];

  const linkClass =
    "text-sm font-semibold text-brand-ink/80 hover:text-brand-purple transition-colors";

  return (
    <header className="sticky top-0 z-40 w-full border-b border-slate-200/70 bg-white/90 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
        <Link href="/" className="shrink-0" aria-label="Concursando con Amor - Inicio">
          <BrandLogo />
        </Link>

        <nav className="hidden lg:flex items-center gap-7" aria-label="Navegación principal">
          {links.map((l) =>
            l.external ? (
              <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer" className={linkClass}>
                {l.label}
              </a>
            ) : (
              <Link key={l.label} href={l.href} className={linkClass}>
                {l.label}
              </Link>
            )
          )}
        </nav>

        <div className="flex items-center gap-2">
          <Link
            href="/#boletos"
            className="hidden sm:inline-flex items-center rounded-full bg-brand-gradient px-5 py-2.5 text-sm font-bold text-white shadow-md shadow-brand-purple/20 transition hover:opacity-90"
          >
            Comprar boletos
          </Link>
          <button
            type="button"
            onClick={() => setOpen((o) => !o)}
            className="lg:hidden rounded-lg p-2 text-brand-ink hover:bg-slate-100"
            aria-label={open ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={open}
            aria-controls="mobile-nav"
          >
            {open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>
      </div>

      <div
        id="mobile-nav"
        className={`lg:hidden overflow-hidden border-t border-slate-200 bg-white transition-all duration-200 ${
          open ? "max-h-[28rem] opacity-100" : "max-h-0 opacity-0"
        }`}
        aria-hidden={!open}
      >
        <nav className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-4" aria-label="Menú móvil">
          {links.map((l) =>
            l.external ? (
              <a
                key={l.label}
                href={l.href}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-lg px-3 py-2.5 font-semibold text-brand-ink hover:bg-slate-50"
                onClick={() => setOpen(false)}
              >
                {l.label}
              </a>
            ) : (
              <Link
                key={l.label}
                href={l.href}
                className="rounded-lg px-3 py-2.5 font-semibold text-brand-ink hover:bg-slate-50"
                onClick={() => setOpen(false)}
              >
                {l.label}
              </Link>
            )
          )}
          <Link
            href="/#boletos"
            className="mt-2 rounded-full bg-brand-gradient px-5 py-3 text-center font-bold text-white"
            onClick={() => setOpen(false)}
          >
            Comprar boletos
          </Link>
        </nav>
      </div>
    </header>
  );
}