import { Link, useNavigate } from "@tanstack/react-router";
import { Search, ShoppingCart, User as UserIcon } from "lucide-react";
import { useState } from "react";
import { useI18n } from "@/lib/i18n";
import { useCart } from "@/lib/cart";
import { useAuth } from "@/lib/auth";
import { CATEGORIES } from "@/lib/catalog";

export function Header() {
  const { t, lang, setLang } = useI18n();
  const { count } = useCart();
  const { user } = useAuth();
  const navigate = useNavigate();
  const [term, setTerm] = useState("");

  const submitSearch = (event: React.FormEvent) => {
    event.preventDefault();
    navigate({ to: "/", search: { q: term || undefined } });
  };

  return (
    <header className="sticky top-0 z-40 border-b-2 border-border bg-background/95 backdrop-blur-sm">
      <div className="mx-auto flex h-16 max-w-[1200px] items-center gap-3 px-4 sm:px-6">
        <Link to="/" className="flex shrink-0 items-center gap-2">
          <span className="grid size-9 place-items-center rounded-2xl bg-teal font-display text-lg font-bold text-cream">
            K
          </span>
          <span className="font-display text-2xl leading-none font-bold tracking-tight">Kuya</span>
        </Link>

        <form onSubmit={submitSearch} className="mx-2 hidden flex-1 items-center sm:flex md:max-w-xl">
          <div className="flex flex-1 items-center gap-2 rounded-full bg-card px-4 py-2.5 shadow-[0_0_0_1px_var(--input)]">
            <Search className="size-4 text-muted-foreground" />
            <input
              value={term}
              onChange={(e) => setTerm(e.target.value)}
              className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
              placeholder={t("searchPlaceholder")}
              aria-label={t("search")}
            />
          </div>
          <button type="submit" className="kuya-btn kuya-btn-buy ml-2 shrink-0 px-5 py-2.5 text-sm">
            {t("search")}
          </button>
        </form>

        <nav className="ml-auto flex items-center gap-1">
          <button
            type="button"
            onClick={() => setLang(lang === "pt" ? "en" : "pt")}
            className="rounded-full px-2.5 py-2 font-display text-sm font-bold uppercase hover:bg-muted"
            aria-label="Language"
          >
            {lang === "pt" ? "PT" : "EN"}
          </button>
          <Link to="/sell" className="hidden rounded-full px-3 py-2 text-sm font-semibold hover:bg-muted lg:block">
            {t("sell")}
          </Link>
          <Link to="/cart" className="relative rounded-full p-2.5 hover:bg-muted" aria-label={t("cart")}>
            <ShoppingCart className="size-5" />
            {count > 0 ? (
              <span className="absolute -top-0.5 -right-0.5 grid size-5 place-items-center rounded-full bg-gold text-[11px] font-bold text-ink">
                {count}
              </span>
            ) : null}
          </Link>
          <Link
            to={user ? "/account" : "/auth"}
            className="grid size-9 place-items-center rounded-full bg-lilac shadow-[0_0_0_2px_var(--input)]"
            aria-label={t("account")}
          >
            {user ? (
              <span className="font-display text-sm font-semibold">
                {(user.email ?? "K").slice(0, 1).toUpperCase()}
              </span>
            ) : (
              <UserIcon className="size-4" />
            )}
          </Link>
        </nav>
      </div>

      <div className="mx-auto -mt-1 flex max-w-[1200px] gap-2 overflow-x-auto px-4 pb-3 sm:px-6">
        <Link to="/" search={{}} className="kuya-chip shrink-0">
          {t("all")}
        </Link>
        {CATEGORIES.map((cat) => (
          <Link key={cat.slug} to="/" search={{ category: cat.slug }} className="kuya-chip shrink-0">
            {lang === "pt" ? cat.pt : cat.en}
          </Link>
        ))}
      </div>
    </header>
  );
}