"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { Menu, ShoppingBasket, User } from "lucide-react";
import { LiveSearch } from "@/components/layout/LiveSearch";
import { MobileNavDrawer } from "@/components/layout/MobileNavDrawer";
import { ThemeToggle } from "@/components/ui/ThemeToggle";
import { useAuth } from "@/context/auth-context";
import { useCart } from "@/context/cart-context";
import { siloDepartments, navMega } from "@/data/silo-catalog";
import { cn } from "@/lib/cn";
import { SiloWordmark } from "@/components/silo/SiloMark";
import {
  FulfillmentButton,
  FulfillmentModal,
} from "@/components/silo/FulfillmentChooser";

const iconBtn =
  "btn-bin btn-bin-ghost btn-bin-icon relative shrink-0 text-[var(--on-brand)]";

export function Header() {
  const pathname = usePathname();
  const { itemCount, openCart } = useCart();
  const { user } = useAuth();
  const [open, setOpen] = useState(false);
  const [mega, setMega] = useState<string | null>(null);
  const hideChrome = pathname.startsWith("/admin");
  const closeMenu = useCallback(() => setOpen(false), []);

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

  if (hideChrome) return null;

  return (
    <>
      <header className="sticky top-0 z-50">
        <div className="silo-chrome bg-[var(--brand-blue-deep)]">
          <div className="mx-auto flex w-full max-w-[1280px] items-center gap-3 px-3 py-2.5 sm:px-6 lg:px-8">
            <div className="lg:hidden">
              <button
                type="button"
                className="btn-bin btn-bin-ghost btn-bin-icon"
                onClick={() => setOpen(true)}
                aria-label="Product categories"
              >
                <Menu className="h-4 w-4" />
              </button>
            </div>
            <Link href="/" className="relative z-[2] shrink-0 cursor-pointer">
              <SiloWordmark light />
            </Link>
            <div className="hidden min-w-0 flex-1 lg:block">
              <LiveSearch />
            </div>
            <div className="ml-auto flex items-center gap-1.5">
              <div className="hidden min-[420px]:block">
                <FulfillmentButton />
              </div>
              <ThemeToggle className="btn-bin btn-bin-ghost btn-bin-icon border-0 bg-[color-mix(in_srgb,var(--on-brand)_7%,transparent)] text-[var(--on-brand)] sm:h-10 sm:w-10" />
              <button type="button" onClick={openCart} className={iconBtn} aria-label="Open cart">
                <ShoppingBasket className="h-4 w-4" />
                {itemCount > 0 ? (
                  <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--straw)] px-1 text-[10px] font-bold text-[var(--brand-blue-deep)]">
                    {itemCount}
                  </span>
                ) : null}
              </button>
              <Link
                href={
                  user ? (user.role === "admin" ? "/admin" : "/account") : "/login"
                }
                className={cn(iconBtn, "btn-bin-grow")}
              >
                <User className="h-4 w-4" />
                <span className="hidden text-sm md:inline">
                  {user ? (user.role === "admin" ? "Admin" : user.name.split(" ")[0]) : "Sign in"}
                </span>
              </Link>
            </div>
          </div>
          <div className="px-3 pb-2 lg:hidden">
            <LiveSearch compact />
          </div>
        </div>

        <div className="hidden border-b border-border bg-card lg:block">
          <nav className="mx-auto flex w-full max-w-[1280px] items-center gap-1 px-6 lg:px-8">
            {(
              [
                ["products", "Products"],
                ["weekly", "Weekly specials"],
                ["featured", "Featured"],
                ["recipes", "Recipes"],
              ] as const
            ).map(([key, label]) => (
              <div
                key={key}
                className="relative"
                onMouseEnter={() => setMega(key)}
                onMouseLeave={() => setMega(null)}
              >
                <button
                  type="button"
                  onClick={() => setMega((current) => (current === key ? null : key))}
                  className={cn(
                    "h-12 px-3 text-sm font-semibold",
                    mega === key
                      ? "text-[var(--spruce-ink)]"
                      : "text-foreground hover:text-[var(--spruce-ink)]",
                  )}
                >
                  {label}
                </button>
                {mega === key ? (
                  <div className="absolute left-0 top-full z-40 w-[420px] border border-border bg-card p-4 shadow-[var(--shadow-soft)]">
                    <div className="grid grid-cols-2 gap-1">
                      {navMega[key].map((link) => (
                        <Link
                          key={link.href}
                          href={link.href}
                          className="rounded-sm px-2 py-1.5 text-sm hover:bg-surface"
                        >
                          {link.label}
                        </Link>
                      ))}
                    </div>
                  </div>
                ) : null}
              </div>
            ))}
              <Link
                href="/shop"
                className="btn-bin btn-bin-sm ml-auto self-center"
              >
                Shop the crib
              </Link>
          </nav>
        </div>

        <div className="hidden border-b border-border bg-background lg:block">
          <div className="hide-scrollbar mx-auto flex w-full max-w-[1280px] gap-2 overflow-x-auto px-3 py-2 sm:px-6 lg:px-8">
            {siloDepartments.map((dept) => (
              <Link
                key={dept.slug}
                href={`/categories/${dept.slug}`}
                className={cn(
                  pathname === `/categories/${dept.slug}`
                    ? "btn-bin btn-bin-sm"
                    : "btn-bin btn-bin-outline btn-bin-sm",
                )}
              >
                {dept.name}
              </Link>
            ))}
          </div>
        </div>
      </header>
      <FulfillmentModal />
      <MobileNavDrawer open={open} brand="SiloMart" onClose={closeMenu} />
    </>
  );
}