"use client";

import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { Suspense, useCallback, useEffect, useState } from "react";
import { Heart, Menu, ShoppingBag, User } from "lucide-react";
import { BrandLockup } from "@/components/brand/BrandMark";
import { LiveSearch } from "@/components/layout/LiveSearch";
import { MobileNavDrawer } from "@/components/layout/MobileNavDrawer";
import { usePublicSettings } from "@/components/layout/SiteBranding";
import { ThemeToggle } from "@/components/ui/ThemeToggle";
import { useAuth } from "@/context/auth-context";
import { useCart } from "@/context/cart-context";
import { useWishlist } from "@/context/wishlist-context";
import { cn } from "@/lib/cn";

const genderTabs = [
  { label: "women", href: "/shop?category=women" },
  { label: "men", href: "/shop?category=men" },
  { label: "kids", href: "/categories/kids" },
  { label: "baby", href: "/categories/baby" },
];

function GenderNav() {
  const pathname = usePathname();
  const search = useSearchParams();
  const category = search.get("category") ?? "";

  return (
    <nav aria-label="Department" className="hidden items-center gap-0.5 md:flex">
      {genderTabs.map((tab) => {
        const active =
          (tab.label === "women" &&
            (category === "women" || pathname === "/")) ||
          (tab.label === "men" && category === "men") ||
          (tab.label === "kids" && pathname.includes("/kids")) ||
          (tab.label === "baby" && pathname.includes("/baby"));
        return (
          <Link
            key={tab.label}
            href={tab.href}
            className={cn(
              "relative px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] transition",
              active
                ? "text-foreground"
                : "text-muted hover:text-foreground",
            )}
          >
            {tab.label}
            {active ? (
              <span className="absolute inset-x-2 -bottom-1 h-[2px] bg-[var(--accent)]" />
            ) : null}
          </Link>
        );
      })}
    </nav>
  );
}

/** BhoFit header — wordmark, departments, compact search. */
export function Header() {
  const pathname = usePathname();
  const { itemCount, openCart } = useCart();
  const { ids } = useWishlist();
  const { user } = useAuth();
  const settings = usePublicSettings();
  const [open, setOpen] = useState(false);
  const hideChrome = pathname.startsWith("/admin");
  const brand = settings?.siteName || "BhoFit";

  const closeMenu = useCallback(() => setOpen(false), []);

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

  if (hideChrome) return null;

  const iconBtn =
    "relative inline-flex h-8 w-8 shrink-0 items-center justify-center text-foreground transition hover:text-[var(--accent)]";

  return (
    <>
      <header className="sticky top-0 z-50 border-b border-border bg-[var(--paper)]/92 backdrop-blur-md">
        <div className="atelier flex h-14 items-center gap-4 lg:h-[58px]">
          <Link href="/" className="flex shrink-0 items-center" aria-label={brand}>
            <BrandLockup name={brand} logoUrl={settings?.logoUrl} />
          </Link>

          <Suspense fallback={null}>
            <GenderNav />
          </Suspense>

          <div className="ml-auto hidden min-w-0 max-w-[240px] flex-1 lg:block">
            <LiveSearch />
          </div>

          <div className="ml-auto flex shrink-0 items-center gap-0.5 lg:ml-2">
            <ThemeToggle />
            <Link href="/wishlist" className={iconBtn} aria-label="Wishlist">
              <Heart className="h-[18px] w-[18px]" strokeWidth={1.75} />
              {ids.length > 0 ? (
                <span className="absolute right-0.5 top-0.5 h-1.5 w-1.5 bg-[var(--accent)]" />
              ) : null}
            </Link>
            <Link
              href={
                user
                  ? user.role === "admin"
                    ? "/admin"
                    : "/account"
                  : "/login"
              }
              className={iconBtn}
              aria-label="Membership / Purchase history"
            >
              <User className="h-[18px] w-[18px]" strokeWidth={1.75} />
            </Link>
            <button
              type="button"
              onClick={openCart}
              className={iconBtn}
              aria-label="Cart"
            >
              <ShoppingBag className="h-[18px] w-[18px]" strokeWidth={1.75} />
              {itemCount > 0 ? (
                <span className="absolute right-0 top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-semibold text-background">
                  {itemCount}
                </span>
              ) : null}
            </button>
            <button
              type="button"
              className={iconBtn}
              onClick={() => setOpen(true)}
              aria-label="Menu / Product Search"
              aria-expanded={open}
              aria-controls="mobile-nav-drawer"
            >
              <Menu className="h-5 w-5" strokeWidth={1.75} />
            </button>
          </div>
        </div>

        <div className="border-t border-border px-4 py-2 lg:hidden">
          <LiveSearch compact />
        </div>
      </header>

      <MobileNavDrawer
        open={open}
        brand={brand}
        logoUrl={settings?.logoUrl}
        onClose={closeMenu}
      />
    </>
  );
}