import { createFileRoute, Link } from "@tanstack/react-router";
import { ChevronLeft, Clock, Heart, Minus, Plus, ShoppingBasket, Users } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { SpiceDots } from "@/components/recipe-card";
import { useMounted } from "@/components/shell";
import { getRecipe, scaleQty } from "@/lib/recipes";
import { useKitchen } from "@/lib/store";
import { bnNum } from "@/lib/utils";

export const Route = createFileRoute("/recipe/$id")({ component: RecipePage });

function RecipePage() {
  const { id } = Route.useParams();
  const recipe = getRecipe(id);
  const mounted = useMounted();
  const fav = useKitchen((s) => s.favorites.includes(id));
  const toggleFavorite = useKitchen((s) => s.toggleFavorite);
  const servingsMap = useKitchen((s) => s.servings);
  const setServings = useKitchen((s) => s.setServings);
  const addToBazaar = useKitchen((s) => s.addToBazaar);

  if (!recipe) {
    return (
      <div className="py-20 text-center">
        <p className="font-display text-2xl">রেসিপি পাওয়া যায়নি</p>
        <Link to="/" className="mt-4 inline-block text-sm text-accent underline">
          হোমে ফিরুন
        </Link>
      </div>
    );
  }

  const servings = servingsMap[id] ?? recipe.servings;

  return (
    <article className="heshel-enter mx-auto max-w-2xl">
      <Link
        to="/"
        className="mb-4 inline-flex h-11 items-center gap-1 text-sm text-muted hover:text-ink"
      >
        <ChevronLeft className="size-4" />
        সব রেসিপি
      </Link>

      <div className="overflow-hidden rounded-[var(--radius-xl)] shadow-[var(--shadow-border)]">
        <img src={recipe.image} alt={recipe.nameBn} className="aspect-dish w-full object-cover" />
      </div>

      <header className="mt-6">
        <p className="text-sm tracking-wide text-muted">{recipe.nameEn}</p>
        <h1 className="mt-1 font-display text-4xl font-semibold">{recipe.nameBn}</h1>
        <p className="mt-3 text-ink-soft">{recipe.story}</p>
        <dl className="mt-5 flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted">
          <div className="flex items-center gap-1.5">
            <Clock className="size-4" />
            <span className="tabular-nums">{bnNum(recipe.timeMin)} মিনিট</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Users className="size-4" />
            <span className="tabular-nums">{bnNum(recipe.servings)} জনের মাপ</span>
          </div>
          <div className="flex items-center gap-2">
            <span>ঝাল</span>
            <SpiceDots level={recipe.spice} />
          </div>
          <div>{recipe.difficulty}</div>
        </dl>
      </header>

      <div className="mt-6 flex flex-wrap gap-2">
        <Button
          type="button"
          variant={mounted && fav ? "primary" : "secondary"}
          onClick={() => toggleFavorite(recipe.id)}
        >
          <Heart className={mounted && fav ? "fill-current" : ""} />
          {mounted && fav ? "পছন্দে আছে" : "পছন্দ"}
        </Button>
        <Button
          type="button"
          variant="secondary"
          onClick={() => {
            addToBazaar(
              recipe.ingredients.map((ing) => ({
                item: ing.item,
                qty: scaleQty(ing, servings, recipe.servings),
              })),
            );
            toast("বাজারের তালিকায় যোগ হয়েছে");
          }}
        >
          <ShoppingBasket />
          বাজারে যোগ
        </Button>
        <Button asChild>
          <Link to="/cook/$id" params={{ id: recipe.id }}>
            রান্না শুরু
          </Link>
        </Button>
      </div>

      <section className="mt-10">
        <div className="flex items-center justify-between">
          <h2 className="font-display text-2xl font-semibold">উপকরণ</h2>
          <div className="flex items-center gap-2">
            <Button
              type="button"
              size="icon"
              variant="secondary"
              aria-label="কমান"
              onClick={() => setServings(id, servings - 1)}
            >
              <Minus />
            </Button>
            <span className="min-w-16 text-center text-sm tabular-nums">
              {bnNum(servings)} জন
            </span>
            <Button
              type="button"
              size="icon"
              variant="secondary"
              aria-label="বাড়ান"
              onClick={() => setServings(id, servings + 1)}
            >
              <Plus />
            </Button>
          </div>
        </div>
        <ul className="mt-4 divide-y divide-line rounded-[var(--radius-lg)] bg-surface px-1 shadow-[var(--shadow-border)]">
          {recipe.ingredients.map((ing) => (
            <li key={ing.item} className="flex items-baseline justify-between gap-4 px-4 py-3">
              <span>{ing.item}</span>
              <span className="shrink-0 text-sm text-muted tabular-nums">
                {scaleQty(ing, servings, recipe.servings)}
              </span>
            </li>
          ))}
        </ul>
      </section>

      <section className="mt-10">
        <h2 className="font-display text-2xl font-semibold">ধাপ</h2>
        <ol className="mt-4 space-y-4">
          {recipe.steps.map((step, i) => (
            <li key={i} className="flex gap-4">
              <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-accent font-display text-sm text-accent-fg tabular-nums">
                {bnNum(i + 1)}
              </span>
              <p className="pt-1 text-ink-soft">
                {step.text}
                {step.timerMin ? (
                  <span className="mt-1 block text-xs text-muted tabular-nums">
                    {bnNum(step.timerMin)} মিনিটের টাইমার আছে
                  </span>
                ) : null}
              </p>
            </li>
          ))}
        </ol>
      </section>

      {recipe.tips.length ? (
        <section className="mt-10 rounded-[var(--radius-lg)] bg-bg-warm px-5 py-4">
          <h2 className="font-display text-lg font-semibold">মায়ের পরামর্শ</h2>
          <ul className="mt-2 space-y-1.5 text-sm text-ink-soft">
            {recipe.tips.map((t) => (
              <li key={t}>{t}</li>
            ))}
          </ul>
        </section>
      ) : null}

      {recipe.credit ? (
        <p className="mt-8 text-xs text-faint">ছবি: {recipe.credit}</p>
      ) : null}
    </article>
  );
}