import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { Header } from "@/components/marketing/header";
import { DynamicCalculator } from "@/components/calculators/dynamic-calculator";
import { calculators, getCalculatorBySlug } from "@/lib/calculators/registry";

export function generateStaticParams() {
  return calculators.map((calculator) => ({ slug: calculator.slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const calculator = getCalculatorBySlug(slug);
  if (!calculator) return {};
  return {
    title: calculator.seo.metaTitle,
    description: calculator.seo.metaDescription,
    alternates: { canonical: `/calculators/${calculator.slug}` }
  };
}

export default async function CalculatorPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const calculator = getCalculatorBySlug(slug);
  if (!calculator) notFound();
  return (
    <main>
      <Header />
      <section className="container-shell py-14">
        <div className="mb-8">
          <div className="text-sm font-bold uppercase tracking-wide text-blue-600">{calculator.category}</div>
          <h1 className="mt-3 text-5xl font-black">{calculator.title}</h1>
          <p className="mt-4 max-w-2xl text-lg leading-8 text-slate-600">{calculator.description}</p>
        </div>
        <DynamicCalculator calculator={calculator} />
        <section className="mt-10 grid gap-5 lg:grid-cols-3">
          <div className="card p-6 lg:col-span-2">
            <h2 className="text-2xl font-black">How this calculator works</h2>
            <p className="mt-4 leading-8 text-slate-600">Enter your business numbers, validate the assumptions, and use the result as an estimate for decision-making. Premium users can save this calculation, compare scenarios and export a clean report.</p>
          </div>
          <div className="card p-6">
            <h2 className="font-black">Related tools</h2>
            <ul className="mt-4 space-y-3 text-sm text-slate-600">
              {calculator.relatedCalculators.map((related) => <li key={related}>{related}</li>)}
            </ul>
          </div>
        </section>
      </section>
    </main>
  );
}