import { createFileRoute, Link } from "@tanstack/react-router";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CookTimer } from "@/components/cook-timer";
import { getRecipe } from "@/lib/recipes";
import { bnNum } from "@/lib/utils";

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

function CookPage() {
  const { id } = Route.useParams();
  const recipe = getRecipe(id);
  const [step, setStep] = useState(0);

  if (!recipe) {
    return (
      <div className="flex min-h-dvh items-center justify-center bg-bg">
        <Link to="/" className="text-accent underline">
          হোমে ফিরুন
        </Link>
      </div>
    );
  }

  const total = recipe.steps.length;
  const current = recipe.steps[step]!;
  const progress = ((step + 1) / total) * 100;

  return (
    <div className="flex min-h-dvh flex-col bg-bg text-ink">
      <header className="flex items-center justify-between px-3 py-2">
        <Link
          to="/recipe/$id"
          params={{ id: recipe.id }}
          className="inline-flex size-11 items-center justify-center rounded-[var(--radius-md)] text-muted hover:bg-bg-warm hover:text-ink"
          aria-label="বন্ধ করুন"
        >
          <X className="size-5" />
        </Link>
        <p className="font-display text-lg font-semibold">{recipe.nameBn}</p>
        <span className="w-11 text-right text-sm text-muted tabular-nums">
          {bnNum(step + 1)}/{bnNum(total)}
        </span>
      </header>

      <div className="h-1 bg-bg-warm">
        <div
          className="h-full bg-accent transition-[width] duration-[var(--motion-fast)] ease-[var(--ease-out)]"
          style={{ width: `${progress}%` }}
        />
      </div>

      <div className="mx-auto flex w-full max-w-xl flex-1 flex-col px-5 py-8">
        <p className="text-xs font-medium tracking-[0.18em] text-muted uppercase">
          ধাপ {bnNum(step + 1)}
        </p>
        <h1 className="mt-4 font-display text-3xl font-semibold leading-snug md:text-4xl">
          {current.text}
        </h1>
        {current.timerMin ? (
          <CookTimer minutes={current.timerMin} resetKey={`${recipe.id}-${step}`} />
        ) : null}
      </div>

      <footer className="mx-auto flex w-full max-w-xl gap-3 px-5 pb-[max(1.5rem,env(safe-area-inset-bottom))]">
        <Button
          type="button"
          variant="secondary"
          className="flex-1"
          disabled={step === 0}
          onClick={() => setStep((s) => Math.max(0, s - 1))}
        >
          <ChevronLeft />
          আগে
        </Button>
        {step < total - 1 ? (
          <Button type="button" className="flex-1" onClick={() => setStep((s) => s + 1)}>
            পরে
            <ChevronRight />
          </Button>
        ) : (
          <Button asChild className="flex-1">
            <Link to="/recipe/$id" params={{ id: recipe.id }}>
              শেষ
            </Link>
          </Button>
        )}
      </footer>
    </div>
  );
}