import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Container, Eyebrow } from "@/components/marketing/section";
import { Button } from "@/components/ui/button";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PublicCatalogGroup, type CatalogRow } from "@/components/models/public-catalog";
import { PROVIDERS, PROVIDER_ORDER } from "@/lib/client/providers";
import { getPublicModels, popularComparisons } from "@/lib/models/public-data";
import { deriveBadges, lifecycleStatus, sortWeightOf } from "@/lib/models/badges";
import { formatContext, formatPrice } from "@/lib/models/format";
import type { PolyModel } from "@/lib/ai/core/types";
import type { BadgeContext } from "@/lib/models/badges";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "AI model catalog — pricing, context windows and capabilities",
  description: "Every model PolyLLM supports across OpenAI, Anthropic, Google Gemini, xAI, Mistral, DeepSeek, Kimi, OpenRouter and Cerebras: input/output prices per million tokens, context windows, reasoning, vision, tools and lifecycle status — updated from the providers’ own listings.",
  alternates: { canonical: "/models" },
  openGraph: { title: "AI model catalog — PolyLLM", description: "Prices, context windows and capabilities for every supported model.", url: "/models" },
};

function toRow(m: PolyModel, ctx: BadgeContext): CatalogRow {
  return {
    key: m.key,
    provider: m.provider,
    name: m.displayName,
    id: m.id,
    inPrice: formatPrice(m.pricing?.inputPerMillion),
    outPrice: formatPrice(m.pricing?.outputPerMillion),
    context: formatContext(m.limits?.contextTokens),
    maxOut: formatContext(m.limits?.maxOutputTokens),
    reasoning: m.capabilities.reasoning,
    vision: m.capabilities.vision,
    tools: m.capabilities.tools,
    json: m.capabilities.structuredOutput,
    lifecycle: lifecycleStatus(m, { ctx }),
    badges: deriveBadges(m, ctx),
  };
}

export default async function PublicModelsPage() {
  const { models, ctx, ok } = await getPublicModels();
  const visible = models.filter((m) => m.status !== "deprecated");
  const groups = PROVIDER_ORDER.map((p) => ({ provider: p, list: visible.filter((m) => m.provider === p).sort((a, b) => sortWeightOf(b) - sortWeightOf(a) || a.displayName.localeCompare(b.displayName)) })).filter((g) => g.list.length);
  const popular = popularComparisons(models);

  return (
    <>
      <section className="border-b border-border bg-bg-subtle/60 py-12 sm:py-16">
        <Container>
          <Eyebrow>Model catalog</Eyebrow>
          <h1 className="mt-3 max-w-3xl text-balance text-3xl font-semibold leading-[1.08] tracking-tight sm:text-5xl">Every model. One honest table.</h1>
          <p className="mt-4 max-w-2xl text-pretty text-[15px] leading-7 text-fg-muted sm:text-base">
            {visible.length ? `${visible.length} models from ${groups.length} providers` : "Models from nine providers"} — prices per million tokens, context windows, reasoning, vision, tools and lifecycle status, merged from each provider’s live listing and documented catalogs. Bring your own keys and use any of them in one workspace.
          </p>
          <div className="mt-6 flex flex-col gap-2 sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/signup">
                Start using PolyLLM <ArrowRight />
              </Link>
            </Button>
            {popular[0] ? (
              <Button asChild size="lg" variant="ghost" className="w-full sm:w-auto">
                <Link href={`/compare/${popular[0].slug}`}>
                  Compare {popular[0].a.displayName} vs {popular[0].b.displayName}
                </Link>
              </Button>
            ) : null}
          </div>
        </Container>
      </section>

      <Container className="py-10 sm:py-14">
        {!ok || visible.length === 0 ? (
          <div className="rounded-xl border border-dashed border-border px-6 py-12 text-center">
            <p className="text-sm font-medium">{ok ? "The catalog is being populated." : "The catalog is temporarily unavailable."}</p>
            <p className="mt-1 text-[13px] text-fg-muted">Please check back in a moment.</p>
          </div>
        ) : (
          <div className="space-y-12">
            {groups.map((g) => (
              <section key={g.provider} id={g.provider} aria-labelledby={`h-${g.provider}`} className="scroll-mt-20">
                <div className="flex items-center gap-3">
                  <span className="flex size-9 items-center justify-center rounded-lg bg-bg-subtle">
                    <ProviderIcon provider={g.provider} size={18} />
                  </span>
                  <div>
                    <h2 id={`h-${g.provider}`} className="text-lg font-semibold tracking-tight">
                      {PROVIDERS[g.provider].name}
                    </h2>
                    <p className="text-[12.5px] text-fg-muted">
                      {g.list.length} model{g.list.length === 1 ? "" : "s"} · {PROVIDERS[g.provider].description}
                    </p>
                  </div>
                </div>

                <PublicCatalogGroup provider={g.provider} rows={g.list.map((m) => toRow(m, ctx))} />
              </section>
            ))}
          </div>
        )}

        {popular.length ? (
          <section className="mt-16">
            <Eyebrow>Popular comparisons</Eyebrow>
            <h2 className="mt-3 text-2xl font-semibold tracking-tight">Head to head</h2>
            <ul className="mt-5 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
              {popular.map((c) => (
                <li key={c.slug}>
                  <Link href={`/compare/${c.slug}`} className="panel flex items-center gap-3 p-3 transition-colors hover:bg-bg-muted">
                    <span className="flex -space-x-1">
                      <span className="flex size-8 items-center justify-center rounded-full bg-bg-elevated ring-2 ring-bg">
                        <ProviderIcon provider={c.a.provider} size={14} />
                      </span>
                      <span className="flex size-8 items-center justify-center rounded-full bg-bg-elevated ring-2 ring-bg">
                        <ProviderIcon provider={c.b.provider} size={14} />
                      </span>
                    </span>
                    <span className="min-w-0 flex-1 truncate text-[13.5px] font-medium">
                      {c.a.displayName} <span className="text-fg-subtle">vs</span> {c.b.displayName}
                    </span>
                    <ArrowRight className="size-4 shrink-0 text-fg-subtle" />
                  </Link>
                </li>
              ))}
            </ul>
          </section>
        ) : null}

        <section className="mt-16 rounded-2xl border border-border bg-bg-subtle/60 p-6 text-center sm:p-10">
          <h2 className="text-balance text-2xl font-semibold tracking-tight sm:text-3xl">Use any of them with your own keys.</h2>
          <p className="mx-auto mt-3 max-w-md text-[15px] leading-7 text-fg-muted">Free interface, encrypted keys, real streaming, side-by-side Arena and usage analytics.</p>
          <div className="mt-6 flex flex-col justify-center gap-2 sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/signup">
                Create a free account <ArrowRight />
              </Link>
            </Button>
            <Button asChild size="lg" variant="ghost" className="w-full sm:w-auto">
              <Link href="/login">Sign in</Link>
            </Button>
          </div>
          <p className="mt-6 text-[11px] leading-5 text-fg-subtle">Prices are the providers’ published list prices in USD per million tokens at the last catalog audit; verify with the provider before relying on them. Model names are trademarks of their owners.</p>
        </section>
      </Container>
    </>
  );
}