import type { Metadata } from 'next';
import Link from 'next/link';
import { CompareButton } from '@/components/compare/compare-button';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { BTN_GHOST, CTRL, Field, Methodology, RangeBar, SortTh, distDomain } from '@/components/intelligence/bits';
import { TerminalLayout } from '@/components/layout/terminal';
import { Chip } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { withParams } from '@/components/ui/pagination';
import { Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { intel, safe } from '@/lib/api';
import { fmtAgo, fmtInt, fmtSigned, fmtUsdPerM, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { ProviderIntelRow } from '@/lib/types';

export const revalidate = 300;
type SP = Record<string, string | undefined>;
const SORTS = ['models', 'orgs', 'median_input', 'median_output', 'changes', 'added', 'name', 'updated'] as const;
type Sort = (typeof SORTS)[number];
const SORT_LABELS: Record<Sort, string> = { models: 'Models served', orgs: 'Organizations covered', median_input: 'Median input price', median_output: 'Median output price', changes: 'Price changes · 30 d', added: 'Models added · 30 d', name: 'Name', updated: 'Recently updated' };
const KEYS = ['sort', 'feature', 'min_models', 'q'] as const;
const FEATURE_LABELS: Record<string, string> = { batch: 'Batch', cached: 'Prompt caching', fine_tuning: 'Fine-tuning', audio: 'Audio', image: 'Image', video: 'Video', web_search: 'Web search', flex: 'Flex tier', long_context: 'Long-context tier', priority: 'Priority tier', reasoning: 'Reasoning tokens' };

const TITLE = 'AI inference providers — prices, coverage and changes';
const DESC = 'Every inference provider the atlas tracks: models served, organizations covered, input and output price distributions (min · p25 · median · p75 · max, USD per 1M tokens), price changes and models added or removed in the last 30 days, and the features each provider prices (batch, caching, fine-tuning…).';
export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  const filtered = KEYS.some((k) => sp[k] && k !== 'sort');
  return { title: TITLE, description: DESC, alternates: { canonical: routes.providers() }, openGraph: { title: `${TITLE} | ${SITE_NAME}`, description: DESC, url: `${SITE_URL}${routes.providers()}`, siteName: SITE_NAME }, robots: filtered ? { index: false, follow: true } : undefined };
}

const med = (d: ProviderIntelRow['input_price_distribution']) => num(d?.median);

export default async function ProvidersPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cur: Record<string, string | undefined> = {};
  for (const k of KEYS) if (sp[k]) cur[k] = sp[k];
  const sort: Sort = (SORTS as readonly string[]).includes(cur.sort ?? '') ? (cur.sort as Sort) : 'models';
  const res = await safe(intel.providers());
  const all = res?.items ?? [];
  const features = [...new Set(all.flatMap((p) => p.features_supported ?? []))].sort();
  const minModels = num(cur.min_models);
  const q = cur.q?.trim().toLowerCase();
  let items = all.filter((p) => (!cur.feature || (p.features_supported ?? []).includes(cur.feature)) && (minModels === null || (num(p.model_count) ?? 0) >= minModels) && (!q || p.name.toLowerCase().includes(q) || p.organization?.name.toLowerCase().includes(q)));
  const by = (f: (p: ProviderIntelRow) => number | null, dir: 1 | -1 = -1) => (a: ProviderIntelRow, b: ProviderIntelRow) => {
    const x = f(a);
    const y = f(b);
    if (x === null && y === null) return 0;
    if (x === null) return 1;
    if (y === null) return -1;
    return (x - y) * dir;
  };
  items = items.slice().sort(
    sort === 'name' ? (a, b) => a.name.localeCompare(b.name) : sort === 'updated' ? (a, b) => b.updated_at.localeCompare(a.updated_at) : sort === 'orgs' ? by((p) => num(p.organizations_covered)) : sort === 'median_input' ? by((p) => med(p.input_price_distribution), 1) : sort === 'median_output' ? by((p) => med(p.output_price_distribution), 1) : sort === 'changes' ? by((p) => num(p.price_changes_30d)) : sort === 'added' ? by((p) => num(p.models_added_30d)) : by((p) => num(p.model_count)),
  );
  const domainIn = distDomain(all.map((p) => p.input_price_distribution));
  const domainOut = distDomain(all.map((p) => p.output_price_distribution));
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/providers', cur, patch);
  const filterCount = ['feature', 'min_models', 'q'].filter((k) => cur[k]).length;

  const filters = (
    <form action="/providers" method="get" className="space-y-3" data-provider-filters>
      <Field label="Name">
        <input name="q" defaultValue={cur.q ?? ''} placeholder="Provider or organization" className={CTRL} />
      </Field>
      <Field label="Priced feature">
        <select name="feature" defaultValue={cur.feature ?? ''} className={CTRL}>
          <option value="">Any</option>
          {features.map((f) => (
            <option key={f} value={f}>
              {FEATURE_LABELS[f] ?? f.replace(/_/g, ' ')}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Models served ≥">
        <input name="min_models" inputMode="numeric" defaultValue={cur.min_models ?? ''} placeholder="e.g. 20" className={CTRL} />
      </Field>
      <Field label="Sort">
        <select name="sort" defaultValue={sort} className={CTRL}>
          {SORTS.map((s) => (
            <option key={s} value={s}>
              {SORT_LABELS[s]}
            </option>
          ))}
        </select>
      </Field>
      <div className="flex gap-2">
        <button type="submit" className="inline-flex h-11 flex-1 items-center justify-center bg-ink lg:h-10 px-3 text-sm font-medium text-canvas hover:opacity-90">
          Apply
        </button>
        <Link href="/providers" className={BTN_GHOST}>
          Reset
        </Link>
      </div>
    </form>
  );

  const inspector = (
    <div className="space-y-3 text-xs leading-relaxed text-ink-2">
      <p>{res?.note ?? 'Aggregates unavailable.'}</p>
      <p>
        Range bars share one logarithmic axis per column (input {fmtUsdPerM(domainIn[0])} → {fmtUsdPerM(domainIn[1])}; output {fmtUsdPerM(domainOut[0])} → {fmtUsdPerM(domainOut[1])}): the light band spans min → max, the solid band p25 → p75, the tick is the median.
      </p>
      <p>
        Features = keys priced on at least one offer (batch, cached input, fine-tuning, audio…), as published. <Link href="/developers" className="link">GET /providers</Link>
      </p>
    </div>
  );

  return (
    <TerminalLayout filters={filters} inspector={inspector} filtersTitle="Filters" inspectorTitle="Reading" storageKey="aia-inspector-providers" filterCount={filterCount}>
      <PageHeader eyebrow="Providers & pricing" title="Inference providers" lede="Who serves which models, at what published prices, and how those prices move. Distributions are over live offers with a positive price; every change is kept." aside={res ? <p className="tnum text-sm text-ink-3">{fmtInt(items.length)} of {fmtInt(all.length)} providers</p> : undefined} className="pt-4 md:pt-6" />
      <div className="pb-16">
        {!res ? (
          <Unavailable what="Providers" />
        ) : items.length === 0 ? (
          <EmptyState title="No provider matches these filters">Remove the feature or model-count filter.</EmptyState>
        ) : (
          <>
            <DataTable scroll compact>
              <thead>
                <tr>
                  <SortTh active={sort === 'name'} href={href({ sort: 'name' })}>Provider</SortTh>
                  <SortTh active={sort === 'models'} href={href({ sort: undefined })} num dir="desc">Models</SortTh>
                  <SortTh active={sort === 'orgs'} href={href({ sort: 'orgs' })} num dir="desc">Orgs</SortTh>
                  <SortTh active={sort === 'median_input'} href={href({ sort: 'median_input' })}>Input / 1M · distribution</SortTh>
                  <SortTh active={sort === 'median_output'} href={href({ sort: 'median_output' })}>Output / 1M · distribution</SortTh>
                  <SortTh active={sort === 'changes'} href={href({ sort: 'changes' })} num dir="desc">Δ price · 30 d</SortTh>
                  <SortTh active={sort === 'added'} href={href({ sort: 'added' })} num dir="desc">± models · 30 d</SortTh>
                  <Th>Features</Th>
                  <SortTh active={sort === 'updated'} href={href({ sort: 'updated' })} dir="desc">Updated</SortTh>
                  <Th num>Quality</Th>
                  <Th className="w-24" aria-label="Compare" />
                </tr>
              </thead>
              <tbody>
                {items.length === 0 && <EmptyRow cols={11} />}
                {items.map((p) => (
                  <tr key={p.id} data-provider-row>
                    <Td primary>
                      <EntityLink e={p} />
                      {p.organization && <span className="ml-2 text-xs text-ink-3">{p.organization.name}</span>}
                    </Td>
                    <Td num label="Models" className="tnum">{fmtInt(p.model_count)}</Td>
                    <Td num label="Organizations" className="tnum text-ink-2">{fmtInt(p.organizations_covered)}</Td>
                    <Td label="Input distribution">
                      <RangeBar d={p.input_price_distribution} domain={domainIn} label="Input price" />
                    </Td>
                    <Td label="Output distribution">
                      <RangeBar d={p.output_price_distribution} domain={domainOut} label="Output price" />
                    </Td>
                    <Td num label="Price changes 30 d" className="tnum">{fmtInt(p.price_changes_30d)}</Td>
                    <Td num label="Models ± 30 d" className="tnum">
                      <span className="text-positive">{fmtSigned(p.models_added_30d)}</span> <span className="text-ink-3">/</span> <span className={num(p.models_removed_30d) ? 'text-danger' : 'text-ink-3'}>{num(p.models_removed_30d) ? `−${fmtInt(p.models_removed_30d)}` : '0'}</span>
                    </Td>
                    <Td label="Features" className="max-w-[16rem]">
                      <span className="flex flex-wrap gap-1">
                        {(p.features_supported ?? []).slice(0, 6).map((f) => (
                          <Chip key={f}>{FEATURE_LABELS[f] ?? f.replace(/_/g, ' ')}</Chip>
                        ))}
                        {(p.features_supported?.length ?? 0) > 6 && <span className="text-[11px] text-ink-3">+{(p.features_supported?.length ?? 0) - 6}</span>}
                        {!(p.features_supported?.length ?? 0) && <span className="text-xs text-ink-3">—</span>}
                      </span>
                    </Td>
                    <Td label="Updated" className="text-ink-2 whitespace-nowrap" title={p.updated_at}>{fmtAgo(p.updated_at)}</Td>
                    <Td num label="Quality"><QualityMark q={p.quality?.score} /></Td>
                    <Td className="text-right">
                      <CompareButton e={p} size="sm" />
                    </Td>
                  </tr>
                ))}
              </tbody>
            </DataTable>
            <Note className="mt-3">Open a provider for its models-served table with price history, listings and delistings, price events and priced features. Prices are USD per 1M tokens as published.</Note>
            <Methodology text={res.note} />
          </>
        )}
      </div>
      <CompareTrayBar />
    </TerminalLayout>
  );
}