import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import type { ReactNode } from 'react';
import { ChangeRow } from '@/components/changes/change-row';
import { EntityBadge, ImportanceMark, OpennessBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Note, Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { fmtDate, fmtDeltaPct, fmtInt, fmtParams, fmtScore, fmtTokens, fmtUsdPerM, hostOf, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ChangeEvent, DiffPayload11, EntitySummary } from '@/lib/types';

/* Diff sections (server). Dense rows with typed deltas; every row keeps its source link and a History link. */

export function Capped({ shown, total, what }: { shown: number; total: number | null; what: string }) {
  if (total === null || total <= shown) return null;
  return <Note className="mt-2">Showing the first {fmtInt(shown)} of {fmtInt(total)} {what}. Narrow the scope or the dates to see everything.</Note>;
}

function SectionTitle({ title, n }: { title: string; n: number | null }) {
  return (
    <>
      {title} <span className="tnum text-base font-normal text-ink-3">{fmtInt(n)}</span>
    </>
  );
}

function Src({ url }: { url: string | null }) {
  if (!url) return <span className="text-ink-3">—</span>;
  return (
    <a href={url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs text-ink-3 hover:text-accent">
      {hostOf(url) ?? 'source'} <ExternalLink className="size-3" aria-hidden />
    </a>
  );
}
function When({ e }: { e: ChangeEvent }) {
  const at = e.occurred_at ?? e.effective_at ?? e.observed_at;
  return (
    <time dateTime={at} title={`observed ${e.observed_at}`} className="tnum text-xs text-ink-2">
      {fmtDate(at)}
    </time>
  );
}

/** New entities of one type as a dense table. */
export function NewEntitiesSection({ id, title, items, total, empty, type }: { id: string; title: string; items: EntitySummary[]; total: number | null; empty: string; type: 'model' | 'paper' | 'other' }) {
  return (
    <Section id={id} eyebrow={title} title={<SectionTitle title={title} n={total ?? items.length} />}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <DataTable caption={title} compact scroll>
            <thead>
              <tr>
                <Th>{type === 'paper' ? 'Paper' : type === 'model' ? 'Model' : 'Entity'}</Th>
                {type === 'other' && <Th>Type</Th>}
                <Th>Organization</Th>
                {type === 'model' && (
                  <>
                    <Th num>Params</Th>
                    <Th num>Context</Th>
                    <Th>Openness</Th>
                    <Th>Released</Th>
                  </>
                )}
                {type === 'paper' && <Th>Published</Th>}
                <Th>First seen</Th>
              </tr>
            </thead>
            <tbody>
              {items.map((e) => {
                const a = e.attributes ?? {};
                return (
                  <tr key={e.id}>
                    <Td primary>
                      <EntityLink e={e} />
                    </Td>
                    {type === 'other' && (
                      <Td label="Type">
                        <EntityBadge type={e.entity_type} small />
                      </Td>
                    )}
                    <Td label="Organization" className="text-ink-2">
                      {e.organization ? <Link href={routes.entity({ entity_type: 'company', slug: e.organization.slug })} className="hover:text-accent">{e.organization.name}</Link> : <span className="text-ink-3">—</span>}
                    </Td>
                    {type === 'model' && (
                      <>
                        <Td num label="Params" className="tnum">{fmtParams(a.parameter_count)}</Td>
                        <Td num label="Context" className="tnum">{num(a.context_length) === null ? '—' : fmtTokens(a.context_length)}</Td>
                        <Td label="Openness">{typeof a.openness === 'string' ? <OpennessBadge openness={a.openness} /> : <span className="text-ink-3">—</span>}</Td>
                        <Td label="Released" className="tnum text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : '—'}</Td>
                      </>
                    )}
                    {type === 'paper' && <Td label="Published" className="tnum text-ink-2">{typeof a.published_at === 'string' ? fmtDate(a.published_at) : '—'}</Td>}
                    <Td label="First seen" className="tnum text-xs text-ink-3">{fmtDate(e.first_seen_at)}</Td>
                  </tr>
                );
              })}
            </tbody>
          </DataTable>
          <Capped shown={items.length} total={total} what="entities" />
        </>
      )}
    </Section>
  );
}

type PriceObj = { input_per_mtok?: unknown; output_per_mtok?: unknown };
function priceOf(v: unknown): PriceObj | null {
  return v && typeof v === 'object' ? (v as PriceObj) : null;
}
function DeltaCell({ from, to, fmt }: { from: unknown; to: unknown; fmt: (v: unknown) => string }) {
  const a = num(from);
  const b = num(to);
  const pct = fmtDeltaPct(a, b);
  return (
    <span className="tnum inline-flex flex-wrap items-baseline gap-1">
      <span className="text-ink-3 line-through decoration-ink-3/60">{a === null ? '—' : fmt(a)}</span>
      <span className="text-ink-3">→</span>
      <span className="font-medium text-ink">{b === null ? '—' : fmt(b)}</span>
      {pct && <span className={`text-[11px] ${b !== null && a !== null && b < a ? 'text-positive' : 'text-accent-2'}`}>{pct}</span>}
    </span>
  );
}

/** PRICE_CHANGED / PROVIDER_LISTED rows: old/new are `{ input_per_mtok, output_per_mtok }` objects. */
export function PriceChangesSection({ id, title, items, total, empty }: { id: string; title: string; items: ChangeEvent[]; total: number | null; empty: string }) {
  return (
    <Section id={id} eyebrow={title} title={<SectionTitle title={title} n={total ?? items.length} />}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <DataTable caption={title} compact scroll>
            <thead>
              <tr>
                <Th>Date</Th>
                <Th>Model</Th>
                <Th>Provider</Th>
                <Th num>Input / 1M</Th>
                <Th num>Output / 1M</Th>
                <Th>Source</Th>
              </tr>
            </thead>
            <tbody>
              {items.map((e) => {
                const o = priceOf(e.old_value);
                const n = priceOf(e.new_value);
                const provider = typeof e.meta?.provider === 'string' ? e.meta.provider : e.entity?.entity_type === 'provider' ? e.entity.name : null;
                return (
                  <tr key={e.id}>
                    <Td label="Date">
                      <span className="inline-flex items-center gap-2">
                        <ImportanceMark importance={e.importance} /> <When e={e} />
                      </span>
                    </Td>
                    <Td primary>{e.entity ? <EntityLink e={e.entity} /> : <span className="text-ink-2">{e.summary}</span>}</Td>
                    <Td label="Provider" className="text-ink-2">{provider ?? '—'}</Td>
                    <Td num label="Input">{o || n ? <DeltaCell from={o?.input_per_mtok} to={n?.input_per_mtok} fmt={(v) => fmtUsdPerM(v)} /> : '—'}</Td>
                    <Td num label="Output">{o || n ? <DeltaCell from={o?.output_per_mtok} to={n?.output_per_mtok} fmt={(v) => fmtUsdPerM(v)} /> : '—'}</Td>
                    <Td label="Source">
                      <Src url={e.source_url} />
                    </Td>
                  </tr>
                );
              })}
            </tbody>
          </DataTable>
          <Capped shown={items.length} total={total} what="price events" />
        </>
      )}
    </Section>
  );
}

/** CONTEXT_CHANGED (and other numeric property events): old → new with %. */
export function ContextChangesSection({ id, title, items, total, empty }: { id: string; title: string; items: ChangeEvent[]; total: number | null; empty: string }) {
  return (
    <Section id={id} eyebrow={title} title={<SectionTitle title={title} n={total ?? items.length} />}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <DataTable caption={title} compact scroll>
            <thead>
              <tr>
                <Th>Date</Th>
                <Th>Model</Th>
                <Th>Organization</Th>
                <Th num>Context window</Th>
                <Th>Source</Th>
                <Th>History</Th>
              </tr>
            </thead>
            <tbody>
              {items.map((e) => (
                <tr key={e.id}>
                  <Td label="Date">
                    <span className="inline-flex items-center gap-2">
                      <ImportanceMark importance={e.importance} /> <When e={e} />
                    </span>
                  </Td>
                  <Td primary>{e.entity ? <EntityLink e={e.entity} /> : <span className="text-ink-2">{e.summary}</span>}</Td>
                  <Td label="Organization" className="text-ink-2">{e.entity?.organization?.name ?? '—'}</Td>
                  <Td num label="Context">
                    <DeltaCell from={e.old_value} to={e.new_value} fmt={(v) => `${fmtTokens(v)} tokens`} />
                  </Td>
                  <Td label="Source">
                    <Src url={e.source_url} />
                  </Td>
                  <Td label="History">{e.entity ? <Link href={routes.entityHistory(e.entity, e.property ?? undefined)} className="link text-xs">claims →</Link> : '—'}</Td>
                </tr>
              ))}
            </tbody>
          </DataTable>
          <Capped shown={items.length} total={total} what="context changes" />
        </>
      )}
    </Section>
  );
}

export function LeadersSection({ id, items, a, b }: { id: string; items: NonNullable<DiffPayload11['new_benchmark_leaders']>; a: string; b: string }) {
  return (
    <Section id={id} eyebrow="New benchmark leaders" title={<SectionTitle title="New benchmark leaders" n={items.length} />} lede={`Benchmarks whose primary-group leader (computed from results observed by each date) differs between ${fmtDate(a)} and ${fmtDate(b)}.`}>
      {items.length === 0 ? (
        <EmptyState title="No benchmark changed leader between these dates" />
      ) : (
        <DataTable caption="New benchmark leaders" compact scroll>
          <thead>
            <tr>
              <Th>Benchmark</Th>
              <Th>Leader at {fmtDate(a)}</Th>
              <Th num>Score</Th>
              <Th>Leader at {fmtDate(b)}</Th>
              <Th num>Score</Th>
              <Th>Metric</Th>
            </tr>
          </thead>
          <tbody>
            {items.map((l) => (
              <tr key={l.benchmark.id}>
                <Td primary>
                  <Link href={routes.benchmark(l.benchmark.slug)} className="text-ink hover:text-accent hover:underline">
                    {l.benchmark.name}
                  </Link>
                  {l.benchmark.category && <span className="block text-[11px] text-ink-3">{l.benchmark.category}</span>}
                </Td>
                <Td label={`At ${fmtDate(a)}`}>{l.at_a ? <EntityLink e={l.at_a.model} className="text-ink-2" /> : <span className="text-ink-3">no result observed yet</span>}</Td>
                <Td num label="Score" className="tnum text-ink-2">{l.at_a ? fmtScore(l.at_a.score) : '—'}</Td>
                <Td label={`At ${fmtDate(b)}`}>{l.at_b ? <EntityLink e={l.at_b.model} className="font-medium" /> : <span className="text-ink-3">—</span>}</Td>
                <Td num label="Score" className="tnum font-medium">{l.at_b ? fmtScore(l.at_b.score) : '—'}</Td>
                <Td label="Metric" className="text-xs text-ink-2">{l.at_b?.metric ?? l.at_a?.metric ?? '—'}{l.at_b?.trust_level ? <span className="block text-ink-3">{l.at_b.trust_level}</span> : null}</Td>
              </tr>
            ))}
          </tbody>
        </DataTable>
      )}
    </Section>
  );
}

/** Generic event list section (property / provider / hardware changes). */
export function EventsSection({ id, title, items, total, empty, lede }: { id: string; title: string; items: ChangeEvent[]; total: number | null; empty: string; lede?: ReactNode }) {
  return (
    <Section id={id} eyebrow={title} title={<SectionTitle title={title} n={total ?? items.length} />} lede={lede}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <ul className="border-t border-rule">
            {items.map((e) => (
              <ChangeRow key={e.id} e={e} showDate live={false} />
            ))}
          </ul>
          <Capped shown={items.length} total={total} what="events" />
        </>
      )}
    </Section>
  );
}

export function EntitiesSection({ id, title, items, total, empty }: { id: string; title: string; items: EntitySummary[]; total: number | null; empty: string }) {
  return (
    <Section id={id} eyebrow={title} title={<SectionTitle title={title} n={total ?? items.length} />}>
      {items.length === 0 ? (
        <EmptyState title={empty} />
      ) : (
        <>
          <ul className="grid gap-x-8 border-t border-rule sm:grid-cols-2">
            {items.map((e) => (
              <li key={e.id} className="flex items-center gap-2 border-b border-rule py-2 text-sm">
                <EntityBadge type={e.entity_type} small />
                <EntityLink e={e} className="truncate" />
                {e.organization && <span className="ml-auto shrink-0 text-xs text-ink-3">{e.organization.name}</span>}
              </li>
            ))}
          </ul>
          <Capped shown={items.length} total={total} what="entities" />
        </>
      )}
    </Section>
  );
}