import Link from 'next/link';
import { ScrollX } from '@/components/models/scroll-x';
import { DataTable, Td, Th } from '@/components/ui/data-table';
import { KeyValue, type KVRow } from '@/components/ui/key-value';
import { SourceCell } from '@/components/ui/provenance';
import { Note } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { cn } from '@/lib/cn';
import { fmtDate, fmtDateTime, fmtInt, fmtValue } from '@/lib/format';
import { PROSE_KEYS, propertyLabel, routes } from '@/lib/site';
import type { AsOfPayload, Claim, EntityDetail } from '@/lib/types';
import { AsOfPicker } from './asof-picker';

/* Canonical order for model properties (mirrors SpecTable in blocks.tsx; kept local to avoid touching that file). */
const MODEL_ORDER = ['family', 'version', 'release_date', 'status', 'openness', 'license', 'architecture', 'parameter_count', 'active_parameter_count', 'is_moe', 'context_length', 'max_output_tokens', 'knowledge_cutoff', 'training_data_cutoff', 'modalities', 'modalities_input', 'modalities_output', 'languages', 'tokenizer', 'api_model_id', 'api_alias', 'base_model', 'quantization', 'quant_format', 'file_size_gb', 'deprecation_date', 'retirement_date', 'retirement_tentative', 'hf_repo', 'pipeline_tag', 'official_url', 'model_card_url', 'paper_url', 'repository_url', 'metric.downloads', 'metric.likes'];
const HIDDEN = new Set(['name', 'slug', 'id', 'entity_type']);
const ORDER = new Map(MODEL_ORDER.map((k, i) => [k, i]));
const byCanonical = (a: string, b: string) => (ORDER.get(a) ?? 999) - (ORDER.get(b) ?? 999) || a.localeCompare(b);

const STATUS_CLS: Record<string, string> = {
  current: 'text-positive bg-positive-soft',
  superseded: 'text-ink-3 bg-surface-2',
  conflicting: 'text-danger bg-danger-soft',
  retracted: 'text-warning bg-warning-soft',
};
function ClaimStatus({ status }: { status: string }) {
  return <span className={cn('inline-flex items-center whitespace-nowrap rounded-[3px] px-1.5 py-[1px] text-[11px] font-medium leading-4 tracking-wide', STATUS_CLS[status] ?? 'text-ink-2 bg-surface-2')}>{status}</span>;
}

/* ------------------------------------------------------------------------------------------------------ as of */

export function AsOfBlock({ d, asof, payload }: { d: EntityDetail; asof: string; payload: AsOfPayload | null }) {
  const back = `${routes.entity(d)}?tab=history`;
  if (!payload) {
    return (
      <div className="hairline pt-4">
        <Unavailable what={`State as of ${asof}`} reason="Could not load the state for that date — check the date (YYYY-MM-DD, not in the future)." />
        <p className="mt-2 text-sm"><Link href={back} className="link">Back to today →</Link></p>
      </div>
    );
  }
  const attrs = payload.attributes ?? {};
  const keys = Object.keys(attrs).filter((k) => !HIDDEN.has(k) && !PROSE_KEYS.has(k) && attrs[k] !== null && attrs[k] !== undefined && attrs[k] !== '' && !(Array.isArray(attrs[k]) && (attrs[k] as unknown[]).length === 0));
  keys.sort(byCanonical);
  const rows: KVRow[] = keys.map((k) => ({ key: k, raw: attrs[k] }));
  return (
    <div className="hairline pt-4">
      <div className="flex flex-wrap items-center justify-between gap-2 bg-accent-soft px-3 py-2.5 text-sm">
        <p className="text-ink">
          <span className="font-medium">Viewing AI Atlas as of {fmtDate(payload.date)}</span>
          <span className="text-ink-2"> — attributes exactly as the atlas knew them on that day; later corrections are not shown.</span>
        </p>
        <Link href={back} className="link shrink-0 py-2">Back to today →</Link>
      </div>
      {!payload.existed ? (
        <EmptyState title={`${d.name} was not yet in AI Atlas on ${fmtDate(payload.date)}`} className="mt-4">
          First seen {fmtDate(payload.first_seen_at)}. Nothing is inferred backwards: no attribute is shown for dates before the first observation.
        </EmptyState>
      ) : (
        <div className="mt-4">
          <p className="eyebrow mb-2">
            Attributes as of {fmtDate(payload.date)} <span className="tnum text-ink-3">{fmtInt(payload.claims?.length ?? 0)} claims in force</span>
          </p>
          <KeyValue rows={rows} />
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------ claim history */

export function ClaimHistory({ d, claims, property }: { d: EntityDetail; claims: Claim[] | null; property?: string }) {
  const base = `${routes.entity(d)}?tab=history`;
  if (!claims) return <Unavailable what="Claim history" />;
  if (!claims.length)
    return (
      <EmptyState title={property ? `No claims recorded for ${propertyLabel(property)}` : 'No claims recorded yet'}>
        {property ? <Link href={base} className="link">Show all properties →</Link> : 'Claims appear when a source states a fact; every later change is kept as a new claim.'}
      </EmptyState>
    );
  const groups = new Map<string, Claim[]>();
  for (const c of claims) {
    const arr = groups.get(c.property);
    if (arr) arr.push(c);
    else groups.set(c.property, [c]);
  }
  const keys = [...groups.keys()].sort(byCanonical);
  const conflicting = claims.filter((c) => c.status === 'conflicting').length;
  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-ink-3">
        <span className="tnum">{fmtInt(claims.length)} claims · {fmtInt(keys.length)} properties</span>
        {conflicting > 0 && <span className="font-medium text-danger">{fmtInt(conflicting)} conflicting</span>}
        {property && (
          <Link href={base} className="link">
            Show all properties
          </Link>
        )}
      </div>
      {keys.map((k) => {
        const rows = groups.get(k) ?? [];
        return (
          <section key={k} id={`h-${k}`} className="scroll-mt-20">
            <h3 className="mb-2 flex flex-wrap items-baseline gap-x-2">
              <Link href={`${base}&property=${encodeURIComponent(k)}`} className="text-sm font-semibold text-ink hover:text-accent" aria-current={property === k ? 'true' : undefined}>
                {propertyLabel(k)}
              </Link>
              <span className="mono text-[11px] text-ink-3">{k}</span>
              <span className="tnum text-xs text-ink-3">{fmtInt(rows.length)}</span>
              {rows.some((c) => c.status === 'conflicting') && <span className="text-xs font-medium text-danger">conflicting claims</span>}
            </h3>
            <ScrollX><DataTable compact caption={`Claim history for ${propertyLabel(k)}`}>
              <thead>
                <tr>
                  <Th>Value</Th>
                  <Th>Valid from → to</Th>
                  <Th>Status</Th>
                  <Th>Source</Th>
                  <Th>Confidence</Th>
                  <Th>Extractor</Th>
                </tr>
              </thead>
              <tbody>
                {rows.map((c) => (
                  <tr key={c.id} className={c.status === 'conflicting' ? 'border-l-2 border-danger' : undefined}>
                    <Td primary className={c.status === 'conflicting' ? 'pl-2 md:pl-2' : undefined}>
                      <span className="tnum">{fmtValue(c.value, c.property)}</span>
                      {c.unit && !/parameter_count|context_length|max_output_tokens|memory_gb|file_size_gb/.test(c.property) && <span className="text-xs text-ink-3"> {c.unit}</span>}
                    </Td>
                    <Td label="Valid" className="tnum text-xs text-ink-2">
                      <time dateTime={c.valid_from}>{fmtDateTime(c.valid_from)}</time>
                      <span className="text-ink-3"> → </span>
                      {c.valid_to ? <time dateTime={c.valid_to}>{fmtDateTime(c.valid_to)}</time> : <span className="font-medium text-positive">current</span>}
                    </Td>
                    <Td label="Status"><ClaimStatus status={c.status} /></Td>
                    <Td label="Source"><SourceCell url={c.source_url} tier={c.tier} name={c.source_name} /></Td>
                    <Td label="Confidence" className={cn('text-xs', c.confidence === 'conflicted' && 'text-danger', c.confidence === 'low' && 'text-warning', !['conflicted', 'low'].includes(c.confidence) && 'text-ink-2')}>{c.confidence}</Td>
                    <Td label="Extractor" className="mono text-xs text-ink-3">{c.extractor}</Td>
                  </tr>
                ))}
              </tbody>
            </DataTable></ScrollX>
          </section>
        );
      })}
      <Note>
        Claims are temporal and append-only: a new observation closes the previous claim (<span className="mono">valid_to</span>) instead of overwriting it. Conflicting claims from different sources are kept side by side and flagged — never averaged. <Link href="/methodology" className="link">Methodology →</Link>
      </Note>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------ panel */

export function HistoryPanel({ d, asof, asofPayload, claims, property }: { d: EntityDetail; asof?: string; asofPayload: AsOfPayload | null; claims: Claim[] | null; property?: string }) {
  return (
    <div className="space-y-10">
      <section>
        <p className="eyebrow mb-2">As of</p>
        <p className="mb-3 max-w-2xl text-sm text-ink-2">Rewind the record: see this entity's attributes exactly as AI Atlas knew them on a given day.</p>
        <AsOfPicker value={asof} />
        {asof && <div className="mt-4"><AsOfBlock d={d} asof={asof} payload={asofPayload} /></div>}
      </section>
      <section>
        <p className="eyebrow mb-2">Claim history{property ? <> · {propertyLabel(property)}</> : null}</p>
        <ClaimHistory d={d} claims={claims} property={property} />
      </section>
    </div>
  );
}