import { createFileRoute, Link } from "@tanstack/react-router";
import { Clock, Search, Users } from "lucide-react";
import { useMemo, useState } from "react";
import { RecipeCard, SpiceDots } from "@/components/recipe-card";
import { CATEGORIES, searchRecipes, todaysRecipe, type CategoryId } from "@/lib/recipes";
import { bnNum } from "@/lib/utils";

export const Route = createFileRoute("/")({ component: Home });

function Home() {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState<CategoryId | "all">("all");
  const featured = useMemo(() => todaysRecipe(), []);
  const list = useMemo(() => searchRecipes(q, cat).filter((r) => r.id !== featured.id || q || cat !== "all"), [q, cat, featured.id]);
  const showFeatured = !q && cat === "all";

  return (
    <div className="heshel-stagger flex flex-col gap-8">
      <section className="pt-2">
        <p className="text-sm font-medium tracking-wide text-muted">বাঙালির রান্নাঘর</p>
        <h1 className="mt-1 font-display text-4xl font-semibold text-ink md:text-5xl">
          আজ কী রান্না?
        </h1>
      </section>

      <label className="relative block">
        <span className="sr-only">রেসিপি খুঁজুন</span>
        <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-faint" />
        <input
          type="search"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="রেসিপি খুঁজুন — ইলিশ, খিচুড়ি, দই…"
          className="h-12 w-full rounded-[var(--radius-lg)] bg-surface pr-4 pl-10 text-base text-ink shadow-[var(--shadow-border)] placeholder:text-faint focus:outline-none focus:ring-2 focus:ring-accent/30"
        />
      </label>

      <div className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1 md:mx-0 md:px-0">
        {CATEGORIES.map((c) => {
          const on = cat === c.id;
          return (
            <button
              key={c.id}
              type="button"
              onClick={() => setCat(c.id)}
              className={`h-10 shrink-0 rounded-full px-4 text-sm font-medium transition-colors duration-[var(--motion-quick)] ${
                on ? "bg-accent text-accent-fg" : "bg-surface text-ink-soft shadow-[var(--shadow-border)]"
              }`}
            >
              {c.label}
            </button>
          );
        })}
      </div>

      {showFeatured ? (
        <Link
          to="/recipe/$id"
          params={{ id: featured.id }}
          className="group relative block overflow-hidden rounded-[var(--radius-xl)] shadow-[var(--shadow-border)]"
        >
          <img
            src={featured.image}
            alt={featured.nameBn}
            className="aspect-dish w-full object-cover transition-transform duration-[var(--motion-slow)] group-hover:scale-[1.02] md:aspect-video"
          />
          <div className="absolute inset-0 bg-linear-to-t from-ink/80 via-ink/20 to-transparent" />
          <div className="absolute inset-x-0 bottom-0 p-5 text-accent-fg md:p-7">
            <p className="text-xs font-medium tracking-[0.16em] uppercase">আজকের পদ</p>
            <h2 className="mt-1 font-display text-3xl font-semibold md:text-4xl">{featured.nameBn}</h2>
            <p className="mt-1 max-w-md text-sm text-accent-fg/80">{featured.blurb}</p>
            <p className="mt-3 flex items-center gap-3 text-xs text-accent-fg/70">
              <span className="inline-flex items-center gap-1">
                <Clock className="size-3.5" />
                {bnNum(featured.timeMin)} মিনিট
              </span>
              <span className="inline-flex items-center gap-1">
                <Users className="size-3.5" />
                {bnNum(featured.servings)} জন
              </span>
              <SpiceDots level={featured.spice} />
            </p>
          </div>
        </Link>
      ) : null}

      <section>
        <div className="mb-4 flex items-end justify-between">
          <h2 className="font-display text-2xl font-semibold">
            {q ? "খোঁজার ফল" : cat === "all" ? "সব রেসিপি" : CATEGORIES.find((c) => c.id === cat)?.label}
          </h2>
          <p className="text-sm text-muted tabular-nums">{bnNum(list.length)}টি</p>
        </div>
        {list.length === 0 ? (
          <p className="rounded-[var(--radius-lg)] bg-surface px-5 py-10 text-center text-muted shadow-[var(--shadow-border)]">
            এই খোঁজে কিছু পাওয়া যায়নি। অন্য নাম চেষ্টা করুন।
          </p>
        ) : (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {list.map((r) => (
              <RecipeCard key={r.id} recipe={r} />
            ))}
          </div>
        )}
      </section>
    </div>
  );
}