import type { Metadata } from "next";
import { RecipeBrowser, type RecipeSummary } from "@/app/components/RecipeBrowser";
import { SiteHeader } from "@/app/components/SiteHeader";
import { CATALOG_BY_ID } from "@/app/lib/catalog";
import { CUISINES } from "@/app/lib/plan";
import { RECIPES } from "@/app/lib/recipes";

export const metadata: Metadata = {
  title: "Recipes",
  description: `Browse all ${RECIPES.length} budget-friendly recipes across ${CUISINES.length} cuisines.`,
};

const SUMMARIES: RecipeSummary[] = RECIPES.map((r) => ({
  id: r.id,
  title: r.title,
  description: r.description,
  cuisine: r.cuisine,
  kind: r.kind,
  styles: r.styles,
  appliances: r.requiredAppliances,
  prepTime: r.prepTime,
  ingredientText: r.ingredients.map((i) => CATALOG_BY_ID.get(i.itemId)?.name ?? i.itemId).join(" ").toLowerCase(),
}));

export default function RecipesPage() {
  return (
    <div className="min-h-dvh">
      <SiteHeader active="recipes" />
      <main className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
        <div className="border-b border-line pb-6">
          <p className="font-mono text-xs tracking-widest text-brand-300 uppercase">Complete Index</p>
          <h1 className="mt-1 font-serif text-3xl font-semibold tracking-tight sm:text-4xl">Recipe library</h1>
          <p className="mt-2 max-w-2xl text-ink-muted">
            Every dish the planner draws from: {RECIPES.length} tested recipes across {CUISINES.length} cuisines. Search by
            ingredient (try &ldquo;chickpeas&rdquo; or &ldquo;gochujang&rdquo;) or filter strictly to the appliances in your kitchen.
          </p>
        </div>

        <div className="mt-8">
          <RecipeBrowser recipes={SUMMARIES} />
        </div>
      </main>
    </div>
  );
}