import type { Metadata } from 'next';
import Link from 'next/link';
import { Suspense } from 'react';
import { Calculator } from '@/components/intelligence/calculator';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

type SP = Record<string, string | undefined>;
const TITLE = 'AI cost calculator — price a workload across every provider';
const DESC = 'Pick a model, enter tokens per request, requests per day, cached share and batch: the calculator prices the workload per request, day, month and year for every provider that currently serves the model, from published prices only, plus the cost of filling a 128K, 200K, 1M or 2M-token context.';

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  const title = sp.model ? `Cost of ${sp.name ?? sp.model} per request, day, month and year — every provider` : TITLE;
  return { title, description: DESC, alternates: { canonical: routes.calculator() }, openGraph: { title: `${title} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.calculator()}`, siteName: SITE_NAME }, robots: Object.keys(sp).length ? { index: false, follow: true } : undefined };
}

export default function CalculatorPage() {
  return (
    <Container wide>
      <PageHeader eyebrow="Cost calculator" title="What will this workload cost?" lede="Per request, per day, per month, per year — for every provider that currently serves the model, side by side, from the prices they publish. The second tab prices a fully populated context window. Inputs live in the URL, so a result is shareable." />
      <Suspense fallback={<p className="py-10 text-center text-sm text-ink-3" aria-busy="true">Loading calculator…</p>}>
        <Calculator />
      </Suspense>
      <Note className="mt-8 pb-16">
        Computation: <Link href="/developers" className="link">GET /cost</Link> and <Link href="/developers" className="link">GET /cost/context</Link> on current offers only — no rate limits, latency or quality are modelled. See also the <Link href={routes.prices()} className="link">price terminal</Link> and <Link href={routes.findAModel()} className="link">Find a model</Link>.
      </Note>
    </Container>
  );
}