import type { Metadata } from 'next';
import Link from 'next/link';
import { ComparePicker } from '@/components/compare/compare-picker';
import type { TrayItem } from '@/components/compare/compare-store';
import { CompareTerminal } from '@/components/compare/compare-terminal';
import { EntityBadge } from '@/components/ui/badges';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, ApiError, apiD1, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL, typeLabel } from '@/lib/site';
import type { ComparePayload11 } from '@/lib/types';

export const revalidate = 300;

type SP = { ids?: string; mode?: string; diff_only?: string };
const MODES = [
  { id: 'models', label: 'Models', type: 'model' },
  { id: 'providers', label: 'Providers', type: 'provider' },
  { id: 'hardware', label: 'Hardware', type: 'hardware' },
  { id: 'companies', label: 'Companies', type: 'company' },
  { id: 'frameworks', label: 'Frameworks', type: 'framework' },
];

function parseIds(raw: string | undefined): string[] {
  return [...new Set((raw ?? '').split(',').map((s) => s.trim()).filter(Boolean))].slice(0, 6);
}

/** Resolve the comparison, distinguishing a semantic 400 (mixed types / unknown slug) from an outage. */
async function load(ids: string[], mode: string | undefined, diffOnly: boolean): Promise<{ res: ComparePayload11 | null; error: string | null }> {
  if (ids.length < 2) return { res: null, error: null };
  try {
    return { res: await apiD1.compare(ids, { diff_only: diffOnly, mode }), error: null };
  } catch (e) {
    if (e instanceof ApiError && (e.status === 400 || e.status === 404 || e.status === 422)) return { res: null, error: e.detail ?? 'These entities cannot be compared.' };
    return { res: null, error: null };
  }
}

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  const ids = parseIds(sp.ids);
  const res = ids.length >= 2 ? await safe(apiD1.compare(ids, { mode: sp.mode })) : null;
  const canonical = routes.compare(ids.length >= 2 ? ids : undefined);
  if (!res) return { title: 'Compare — models, providers, hardware side by side', description: 'Compare 2–6 entities of one type on every recorded dimension — architecture, context, capabilities, comparable benchmarks, cheapest deployments, licences — with the source of each value.', alternates: { canonical } };
  const names = res.items.map((i) => i.entity.name);
  const title = `${names.join(' vs ')} — ${typeLabel(res.entity_type).toLowerCase()} comparison`;
  const description = `${names.join(', ')} compared on ${res.dimensions.length} recorded dimensions (comparable benchmark groups only) with the source of every value. ${SITE_NAME}.`.slice(0, 300);
  return { title, description, alternates: { canonical }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${canonical}`, type: 'website' } };
}

export default async function ComparePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const ids = parseIds(sp.ids);
  const diffOnly = sp.diff_only === '1';
  const mode = MODES.some((m) => m.id === sp.mode) ? sp.mode : undefined;
  const [{ res, error }, examples] = await Promise.all([load(ids, mode, diffOnly), ids.length < 2 ? safe(api.models({ limit: 3, sort: 'quality' })) : Promise.resolve(null)]);
  const initial: TrayItem[] = res ? res.items.map((it) => ({ slug: it.entity.slug, name: it.entity.name, entity_type: it.entity.entity_type, organization: it.entity.organization?.name ?? null })) : [];
  const exampleHref = examples && examples.items.length >= 2 ? routes.compare(examples.items.slice(0, 3).map((m) => m.slug)) : null;
  const activeMode = res ? MODES.find((m) => m.type === res.entity_type || (m.type === 'company' && ['organization', 'lab', 'university'].includes(res.entity_type)) || (m.type === 'framework' && ['library', 'runtime'].includes(res.entity_type)))?.id ?? 'models' : mode ?? 'models';
  const ld = res ? { '@context': 'https://schema.org', '@type': 'Dataset', name: `${res.items.map((i) => i.entity.name).join(' vs ')} — comparison`, url: `${SITE_URL}${routes.compare(ids)}`, about: res.items.map((i) => ({ '@type': 'Thing', name: i.entity.name, url: `${SITE_URL}${routes.entity(i.entity)}` })) } : null;

  return (
    <Container wide>
      {ld && <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />}
      <PageHeader
        eyebrow={
          res ? (
            <>
              <span>Compare</span>
              <EntityBadge type={res.entity_type} small />
            </>
          ) : (
            'Compare'
          )
        }
        title={res ? res.items.map((i) => i.entity.name).join(' vs ') : 'Compare side by side'}
        lede={res ? `${fmtInt(res.items.length)} ${typeLabel(res.entity_type, true).toLowerCase()} · ${fmtInt(res.dimensions.length)} recorded dimensions${diffOnly ? ' (differences only)' : ''}. Each cell is the value as stated by its source; benchmarks only where every entity sits in the same comparability group.` : 'Two to six entities of one type — models, providers, hardware, companies or frameworks. Each cell shows the recorded value, its source and tier; benchmarks are only compared inside the same comparability group.'}
      >
        <nav aria-label="Compare mode" className="no-scrollbar -mx-4 mt-5 flex gap-1 overflow-x-auto border-b border-rule px-4 md:mx-0 md:px-0" data-compare-modes>
          {MODES.map((m) => {
            const on = m.id === activeMode;
            const keep = res && m.id === activeMode ? `?ids=${ids.map(encodeURIComponent).join(',')}&mode=${m.id}` : `?mode=${m.id}`;
            return (
              <Link key={m.id} href={`/compare${keep}`} aria-current={on ? 'page' : undefined} className={cn('-mb-px flex h-10 shrink-0 items-center gap-1.5 border-b-2 px-3 text-sm whitespace-nowrap', on ? 'border-ink font-medium text-ink' : 'border-transparent text-ink-2 hover:text-ink')}>
                <EntityBadge type={m.type} small className={on ? '' : 'opacity-60'} /> {m.label}
              </Link>
            );
          })}
        </nav>
        <ComparePicker initial={initial} exampleHref={exampleHref} />
      </PageHeader>

      <div className="space-y-8 pb-16">
        {ids.length < 2 ? (
          <EmptyState title={`Pick at least two ${MODES.find((m) => m.id === activeMode)?.label.toLowerCase() ?? 'entities'}`}>Search above, or press “Compare” on any listing or entity page — the selection is kept in this browser and in the URL, so it can be shared.</EmptyState>
        ) : error ? (
          <EmptyState title="These entities cannot be compared together">
            {error}. Comparisons work across entities of one type (all models, all providers…){mode ? ` — the “${MODES.find((m) => m.id === mode)?.label}” mode asserts that type` : ''}. Remove the odd one out in the tray above{mode ? ' or switch mode' : ''}.
          </EmptyState>
        ) : !res ? (
          <Unavailable what="Comparison" reason="The API did not answer. Try again in a moment." />
        ) : (
          <>
            <CompareTerminal res={res} diffOnly={diffOnly} />
            <Note>
              Share this comparison with its URL. Values are the atlas as of now; use each entity's change history for how a value moved{res.entity_type === 'model' && res.items.length === 2 ? <>, or the <Link href={`/models/${encodeURIComponent(res.items[0]!.entity.slug)}/diff/${encodeURIComponent(res.items[1]!.entity.slug)}`} className="link">pairwise diff</Link> with deltas</> : null}. <Link href={routes.methodology()} className="link">How AI Atlas records facts →</Link>
            </Note>
          </>
        )}
      </div>
    </Container>
  );
}