"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { ChevronDown, Menu, X } from "lucide-react";
import { Logo } from "../Logo";
import { Icon } from "../Icon";

type Cat = { slug: string; name: string; name_bn: string; icon: string };
export function Header({ cats, user, lang, t }: { cats: Cat[]; user: { name: string; role: string } | null; lang: "en" | "bn"; t: Record<string, string> }) {
  const path = usePathname(), router = useRouter();
  const [open, setOpen] = useState(false);
  const [drop, setDrop] = useState(false);
  const setLang = (l: string) => { document.cookie = `lang=${l};path=/;max-age=31536000;samesite=lax`; router.refresh(); };
  const on = (h: string) => (h === "/" ? path === "/" : path.startsWith(h));
  const link = (h: string, label: string) => (
    <Link href={h} onClick={() => setOpen(false)} className={`rounded-full px-3.5 py-1.5 text-sm font-medium transition ${on(h) ? "bg-blue-50 text-brand" : "text-slate-700 hover:text-brand"}`}>{label}</Link>
  );
  return (
    <header className="sticky top-0 z-40 border-b border-white/60 bg-white/70 backdrop-blur-xl">
      <div className="container-x flex h-[72px] items-center justify-between gap-4">
        <Logo />
        <nav className="hidden items-center gap-1 lg:flex" aria-label="Main">
          {link("/", t.home)}
          <div className="relative" onMouseEnter={() => setDrop(true)} onMouseLeave={() => setDrop(false)}>
            <Link href="/products" className={`flex items-center gap-1 rounded-full px-3.5 py-1.5 text-sm font-medium ${on("/products") ? "bg-blue-50 text-brand" : "text-slate-700 hover:text-brand"}`}>{t.products}<ChevronDown size={14} /></Link>
            {drop && (
              <div className="absolute left-0 top-full w-72 pt-2"><div className="card rise p-2 shadow-xl">
                {cats.map((c) => (
                  <Link key={c.slug} href={`/products?c=${c.slug}`} onClick={() => setDrop(false)} className="flex items-center gap-3 rounded-xl p-2.5 text-sm hover:bg-blue-50">
                    <span className="grid h-9 w-9 place-items-center rounded-lg bg-blue-50 text-brand"><Icon name={c.icon} size={18} /></span>
                    <span className="font-medium">{lang === "bn" && c.name_bn ? c.name_bn : c.name}</span></Link>
                ))}
              </div></div>
            )}
          </div>
          {link("/pricing", t.pricing)}{link("/about", t.about)}{link("/contact", t.contact)}
        </nav>
        <div className="flex items-center gap-2">
          <div className="hidden rounded-full bg-slate-100 p-0.5 text-xs font-bold sm:flex" role="group" aria-label="Language">
            {(["en", "bn"] as const).map((l) => <button key={l} onClick={() => setLang(l)} className={`rounded-full px-2.5 py-1 ${lang === l ? "bg-brand text-white shadow" : "text-slate-500"}`}>{l === "en" ? "EN" : "বাং"}</button>)}
          </div>
          {user ? <Link href={user.role === "customer" ? "/portal" : "/dashboard"} className="btn btn-primary btn-sm hidden sm:inline-flex">{user.role === "customer" ? t.portal : t.admin}</Link>
            : <><Link href="/login" className="btn btn-ghost btn-sm hidden sm:inline-flex">{t.login}</Link><Link href="/contact" className="btn btn-primary btn-sm hidden sm:inline-flex">{t.quote}</Link></>}
          <button className="rounded-full p-2 lg:hidden" onClick={() => setOpen(!open)} aria-label="Menu" aria-expanded={open}>{open ? <X /> : <Menu />}</button>
        </div>
      </div>
      {open && (
        <div className="container-x rise pb-4 lg:hidden"><div className="card flex flex-col gap-1 p-3">
          {link("/", t.home)}{link("/products", t.products)}{link("/pricing", t.pricing)}{link("/about", t.about)}{link("/contact", t.contact)}
          <div className="mt-2 flex gap-2">
            {user ? <Link href={user.role === "customer" ? "/portal" : "/dashboard"} className="btn btn-primary flex-1">{user.role === "customer" ? t.portal : t.admin}</Link> : <><Link href="/login" className="btn btn-ghost flex-1">{t.login}</Link><Link href="/contact" className="btn btn-primary flex-1">{t.quote}</Link></>}
            <button onClick={() => setLang(lang === "en" ? "bn" : "en")} className="btn btn-ghost">{lang === "en" ? "বাং" : "EN"}</button>
          </div></div></div>
      )}
    </header>
  );
}