import { Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";

import { toBn } from "@/lib/bn";
import { cartCount, useCart } from "@/lib/cart";
import { categories, siteSettings } from "@/lib/catalog";
import { setCartOpen } from "@/lib/ui-store";

const navLinks = [
  { to: "/", label: "হোম" },
  { to: "/shop", label: "শপ" },
  { to: "/about", label: "আমাদের সম্পর্কে" },
  { to: "/contact", label: "যোগাযোগ" },
] as const;

export function Header() {
  const items = useCart();
  const count = cartCount(items);
  const navigate = useNavigate();
  const [query, setQuery] = useState("");
  const [menuOpen, setMenuOpen] = useState(false);

  function submitSearch(e: React.FormEvent) {
    e.preventDefault();
    navigate({ to: "/shop", search: { q: query || undefined, category: undefined } });
  }

  return (
    <header className="sticky top-0 z-40 border-b border-border bg-card/95 backdrop-blur">
      <div className="bg-primary-deep py-2 text-center text-xs text-primary-foreground">
        <i className="fa-solid fa-truck-fast mr-2" aria-hidden="true" />
        সারা বাংলাদেশে হোম ডেলিভারি · ক্যাশ অন ডেলিভারি সুবিধা
      </div>
      <div className="mx-auto flex max-w-6xl items-center gap-3 px-4 py-3">
        <Link to="/" className="flex items-center gap-2">
          <span className="grid size-10 place-items-center rounded-xl bg-primary text-primary-foreground">
            <i className="fa-solid fa-leaf" aria-hidden="true" />
          </span>
          <span className="text-lg font-bold leading-tight text-primary-deep">
            {siteSettings.siteTitle}
          </span>
        </Link>

        <form onSubmit={submitSearch} className="ml-auto hidden flex-1 md:block">
          <div className="relative mx-auto max-w-md">
            <i
              className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
              aria-hidden="true"
            />
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="পণ্য খুঁজুন..."
              aria-label="পণ্য খুঁজুন"
              className="w-full rounded-full border border-input bg-background py-2 pl-10 pr-4 text-sm outline-none focus:ring-2 focus:ring-ring"
            />
          </div>
        </form>

        <nav className="ml-auto hidden items-center gap-5 text-sm font-medium md:flex md:ml-0">
          {navLinks.map((l) => (
            <Link
              key={l.to}
              to={l.to}
              activeProps={{ className: "text-primary" }}
              className="transition hover:text-primary"
            >
              {l.label}
            </Link>
          ))}
        </nav>

        <button
          type="button"
          onClick={() => setCartOpen(true)}
          className="relative ml-2 grid size-10 place-items-center rounded-xl border border-border text-primary-deep"
          aria-label="কার্ট খুলুন"
        >
          <i className="fa-solid fa-basket-shopping" aria-hidden="true" />
          {count > 0 && (
            <span className="absolute -right-1 -top-1 grid min-w-5 place-items-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
              {toBn(count)}
            </span>
          )}
        </button>

        <button
          type="button"
          onClick={() => setMenuOpen((v) => !v)}
          className="grid size-10 place-items-center rounded-xl border border-border md:hidden"
          aria-label="মেনু"
          aria-expanded={menuOpen}
        >
          <i className={`fa-solid ${menuOpen ? "fa-xmark" : "fa-bars"}`} aria-hidden="true" />
        </button>
      </div>

      {menuOpen && (
        <div className="border-t border-border px-4 pb-4 md:hidden">
          <form onSubmit={submitSearch} className="py-3">
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="পণ্য খুঁজুন..."
              aria-label="পণ্য খুঁজুন"
              className="w-full rounded-full border border-input bg-background px-4 py-2 text-sm"
            />
          </form>
          <nav className="grid gap-1 text-sm">
            {navLinks.map((l) => (
              <Link
                key={l.to}
                to={l.to}
                onClick={() => setMenuOpen(false)}
                className="rounded-lg px-2 py-2 hover:bg-muted"
              >
                {l.label}
              </Link>
            ))}
          </nav>
        </div>
      )}

      <div className="hidden border-t border-border bg-secondary/60 md:block">
        <div className="mx-auto flex max-w-6xl items-center gap-6 overflow-x-auto px-4 py-2 text-sm">
          {categories.map((c) => (
            <Link
              key={c.slug}
              to="/shop"
              search={{ category: c.slug, q: undefined }}
              className="flex shrink-0 items-center gap-2 text-secondary-foreground transition hover:text-primary"
            >
              <i className={`fa-solid ${c.icon}`} aria-hidden="true" />
              {c.name}
            </Link>
          ))}
        </div>
      </div>
    </header>
  );
}