import { ExternalLink, GitFork } from 'lucide-react';
import Link from 'next/link';
import { CompareButton } from '@/components/compare/compare-button';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { Evidence } from '@/components/evidence/evidence';
import { SectionNav } from '@/components/layout/terminal';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { IdentityBadge, OpennessChip } from '@/components/models/badges';
import { LineageTree } from '@/components/models/lineage-tree';
import { OpennessBlock } from '@/components/models/openness-block';
import { PriceHistoryChart } from '@/components/models/price-history';
import { ScrollToSection } from '@/components/models/scroll-to-section';
import { identityStrip } from '@/components/models/shared';
import { EntityBadge, StatusBadge } from '@/components/ui/badges';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { KeyValue, type KVRow } from '@/components/ui/key-value';
import { Container, Note } from '@/components/ui/section';
import { WatchButton } from '@/components/watchlist/watch-button';
import { api, apiD1, safe } from '@/lib/api';
import { fmtAgo, fmtDate, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { EntitySummary, ModelDetail } from '@/lib/types';
import { AsOfPicker } from './asof-picker';
import { Capabilities, EntityList, PricesTable, ProvenanceSummary, RelationsBlock, SourcesTable, TimelineList } from './blocks';
import { AsOfBlock, ClaimHistory } from './history';
import { ArtifactsBlock, ComparabilityLegend, DeploymentsTable, HardwareFitBlock, IdentityPanel, ModelBenchmarksBlock, VersionHistoryBlock } from './model-blocks';

/*
  Model page 3.0: sticky header with identity strip → SectionNav → sections in a fixed order (only those with data render):
  Overview · Architecture · Capabilities · Benchmarks · Providers & Pricing · Price history · Hardware fit · Lineage ·
  Versions & Artifacts · Repositories · Papers · Datasets · Timeline · Change history · Provenance. Every value opens the evidence drawer.
*/

export type ModelPageParams = { asof?: string; property?: string; tab?: string };
const ISO_DAY = /^\d{4}-\d{2}-\d{2}$/;
const ARCH_KEYS = ['architecture', 'model_type', 'parameter_count', 'active_parameter_count', 'is_moe', 'num_experts', 'num_layers', 'hidden_size', 'tokenizer', 'vocab_size', 'weights_dtype', 'file_size_gb', 'library_name', 'pipeline_tag', 'hf_repo', 'training_tokens', 'training_data_cutoff'];
const OVERVIEW_KEYS = ['release_date', 'status', 'version', 'knowledge_cutoff', 'deprecation_date', 'retirement_date', 'official_url', 'model_card_url', 'paper_url', 'repository_url', 'api_model_id', 'openrouter_id'];

function sectionTitle(id: string): string {
  return SECTIONS.find((s) => s.id === id)?.label ?? id;
}
const SECTIONS = [
  { id: 'overview', label: 'Overview' },
  { id: 'architecture', label: 'Architecture' },
  { id: 'capabilities', label: 'Capabilities' },
  { id: 'benchmarks', label: 'Benchmarks' },
  { id: 'providers-pricing', label: 'Providers & Pricing' },
  { id: 'price-history', label: 'Price history' },
  { id: 'hardware-fit', label: 'Hardware fit' },
  { id: 'lineage', label: 'Lineage' },
  { id: 'versions-artifacts', label: 'Versions & Artifacts' },
  { id: 'repositories', label: 'Repositories' },
  { id: 'papers', label: 'Papers' },
  { id: 'datasets', label: 'Datasets' },
  { id: 'timeline', label: 'Timeline' },
  { id: 'change-history', label: 'Change history' },
  { id: 'provenance', label: 'Provenance' },
];

function Sec({ id, children, count, lede, action }: { id: string; children: React.ReactNode; count?: number | null; lede?: React.ReactNode; action?: { href: string; label: string } }) {
  return (
    <section id={id} className="scroll-mt-[calc(var(--header-h)+3rem)] border-t border-rule py-6 md:py-8" data-section={id}>
      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
        <h2 className="text-base font-semibold tracking-tight text-ink md:text-lg">
          {sectionTitle(id)}
          {count !== undefined && count !== null && <span className="tnum ml-2 text-sm font-normal text-ink-3">{fmtInt(count)}</span>}
        </h2>
        {action && (
          <Link href={action.href} className="link text-sm">
            {action.label} →
          </Link>
        )}
      </div>
      {lede && <div className="mb-3 max-w-3xl text-sm text-ink-2">{lede}</div>}
      {children}
    </section>
  );
}

function jsonLd(d: ModelDetail, canonical: string) {
  const a = d.attributes ?? {};
  const org = d.organization ? { '@type': 'Organization', name: d.organization.name, url: `${SITE_URL}${routes.entity({ entity_type: 'company', slug: d.organization.slug })}` } : undefined;
  const deployments = d.deployments ?? [];
  return {
    '@context': 'https://schema.org',
    '@type': ['SoftwareApplication', 'Product'],
    name: d.name,
    url: `${SITE_URL}${canonical}`,
    description: d.description ?? undefined,
    applicationCategory: 'AI model',
    alternateName: d.aliases?.length ? d.aliases : undefined,
    identifier: d.identifiers?.map((i) => ({ '@type': 'PropertyValue', propertyID: i.scheme, value: i.value })),
    creator: org,
    manufacturer: org,
    datePublished: typeof a.release_date === 'string' ? a.release_date : undefined,
    license: d.licence && 'key' in d.licence && d.licence.key ? (d.licence.url ?? d.licence.key) : typeof a.license === 'string' ? a.license : undefined,
    isPartOf: d.family && 'slug' in d.family && d.family.slug ? { '@type': 'CreativeWorkSeries', name: d.family.name, url: `${SITE_URL}${routes.family(d.family.slug)}` } : undefined,
    additionalProperty: [
      num(a.parameter_count) !== null ? { '@type': 'PropertyValue', name: 'parameter_count', value: num(a.parameter_count) } : null,
      num(a.context_length) !== null ? { '@type': 'PropertyValue', name: 'context_length', value: num(a.context_length), unitText: 'tokens' } : null,
      typeof a.openness === 'string' ? { '@type': 'PropertyValue', name: 'openness', value: a.openness } : null,
    ].filter(Boolean),
    offers: deployments.length
      ? deployments.slice(0, 8).map((p) => ({ '@type': 'Offer', seller: { '@type': 'Organization', name: p.provider.name }, price: num(p.prices.output) ?? undefined, priceCurrency: p.prices.currency || 'USD', description: 'Output price per 1M tokens', availability: p.status === 'active' ? 'https://schema.org/InStock' : 'https://schema.org/Discontinued' }))
      : undefined,
  };
}

/** SEO description: "Qwen3.6 35B A3B by Qwen: 35B parameters (3B active), 262K context, open weights (Apache-2.0), released 14 May 2026. …" */
export function describeModel(d: ModelDetail): string {
  const a = d.attributes ?? {};
  const bits: string[] = [];
  const p = num(a.parameter_count);
  const ap = num(a.active_parameter_count);
  if (p !== null) bits.push(`${fmtParams(p)} parameters${ap !== null && ap !== p ? ` (${fmtParams(ap)} active)` : ''}`);
  if (num(a.context_length) !== null) bits.push(`${fmtTokens(a.context_length)} context`);
  if (d.openness?.label) bits.push(`${d.openness.label.toLowerCase()}${d.licence && 'key' in d.licence && d.licence.key ? ` (${d.licence.key})` : ''}`);
  if (typeof a.release_date === 'string') bits.push(`released ${fmtDate(a.release_date)}`);
  const n = d.deployments?.length ?? 0;
  const b = d.benchmarks?.items.length ?? 0;
  const tail = [n ? `${n} provider deployment${n === 1 ? '' : 's'}` : null, b ? `${b} benchmark${b === 1 ? '' : 's'}` : null].filter(Boolean).join(', ');
  let s = `${d.name}${d.organization ? ` by ${d.organization.name}` : ''}${bits.length ? `: ${bits.join(', ')}` : ''}.`;
  if (tail) s += ` ${tail} with sourced prices and scores.`;
  s += ` Every value carries its source, tier and observation time on ${SITE_NAME}.`;
  return s.slice(0, 300);
}

export async function ModelPage({ d, canonical, related, params }: { d: ModelDetail; canonical: string; related?: EntitySummary[] | null; params: ModelPageParams }) {
  const a = d.attributes ?? {};
  const asofRaw = params.asof?.trim() || undefined;
  const asof = asofRaw && ISO_DAY.test(asofRaw) ? asofRaw : undefined;
  const property = params.property?.trim() || undefined;
  const [history, asofPayload, benchList] = await Promise.all([safe(api.entityHistory(d.slug, property)), asof ? safe(api.entityAsOf(d.slug, asof)) : Promise.resolve(null), d.benchmarks?.items.length ? safe(apiD1.benchmarks()) : Promise.resolve(null)]);
  const claims = history?.items ?? null;
  const entity = { name: d.name, entity_type: d.entity_type };
  const licenceKey = d.licence && 'key' in d.licence && d.licence.key ? d.licence.key : typeof a.license === 'string' ? a.license : null;
  const strip = identityStrip(a, { opennessLabel: d.openness?.label ?? null, licence: licenceKey });
  const family = d.family && 'slug' in d.family && d.family.slug ? d.family : null;
  const familyLabel = d.family && !('slug' in d.family && d.family.slug) ? d.family.name : typeof a.family === 'string' ? a.family : null;
  const link = ['official_url', 'model_card_url', 'website'].map((k) => a[k]).find((v): v is string => typeof v === 'string' && /^https?:\/\//.test(v)) ?? null;
  const deployments = d.deployments ?? [];
  const priceHistory = d.price_history ?? d.prices ?? [];
  const datasets = (d.relations ?? []).flatMap((g) => g.items.filter((i) => i.entity_type === 'dataset'));
  const lineage = d.lineage ?? { ancestors: [], descendants: [], quantizations: [] };
  const artifactKinds = (d.artifacts?.items ?? []).map((g) => ({ kind: g.kind, count: g.count }));
  const hasLineage = lineage.ancestors.length + lineage.descendants.length + lineage.quantizations.length + artifactKinds.length > 0;
  const archRows: KVRow[] = ARCH_KEYS.filter((k) => a[k] !== undefined && a[k] !== null && a[k] !== '' && !(Array.isArray(a[k]) && (a[k] as unknown[]).length === 0)).map((k) => ({ key: k, raw: a[k] }));
  const overviewRows: KVRow[] = OVERVIEW_KEYS.filter((k) => a[k] !== undefined && a[k] !== null && a[k] !== '').map((k) => ({ key: k, raw: a[k] }));
  const hasCaps = ['tool_calling', 'structured_output', 'reasoning', 'vision', 'audio', 'fine_tuning_available', 'modalities', 'modalities_input', 'modalities_output', 'languages'].some((k) => a[k] !== undefined && a[k] !== null);

  const present = new Set<string>(['overview', 'change-history', 'provenance']);
  if (archRows.length) present.add('architecture');
  if (hasCaps) present.add('capabilities');
  if (d.benchmarks?.items.length || d.results?.length) present.add('benchmarks');
  if (deployments.length || d.prices?.length) present.add('providers-pricing');
  if (priceHistory.length) present.add('price-history');
  if (d.hardware_fit?.length) present.add('hardware-fit');
  if (hasLineage) present.add('lineage');
  if (d.version_history?.length || d.artifacts?.total || d.identity) present.add('versions-artifacts');
  if (d.repositories?.length) present.add('repositories');
  if (d.papers?.length) present.add('papers');
  if (datasets.length) present.add('datasets');
  if (d.timeline?.length) present.add('timeline');
  const nav = SECTIONS.filter((s) => present.has(s.id));
  const ld = jsonLd(d, canonical);

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <ViewBeacon path={canonical} />
      <ScrollToSection />

      <nav aria-label="Breadcrumb" className="pt-5 text-xs text-ink-3">
        <ol className="flex flex-wrap items-center gap-1.5">
          <li>
            <Link href="/" className="hover:text-ink">
              AI Atlas
            </Link>
          </li>
          <li aria-hidden>/</li>
          <li>
            <Link href={routes.models()} className="hover:text-ink">
              Models
            </Link>
          </li>
          {d.organization && (
            <>
              <li aria-hidden>/</li>
              <li>
                <Link href={routes.entity({ entity_type: 'company', slug: d.organization.slug })} className="hover:text-ink">
                  {d.organization.name}
                </Link>
              </li>
            </>
          )}
          {family && (
            <>
              <li aria-hidden>/</li>
              <li>
                <Link href={routes.family(family.slug)} className="hover:text-ink">
                  {family.name}
                </Link>
              </li>
            </>
          )}
          <li aria-hidden>/</li>
          <li className="text-ink-2">{d.name}</li>
        </ol>
      </nav>

      {/* ------------------------------------------------------------------------------------------------ header */}
      <header className="pb-4 pt-4 md:pt-5" data-model-header>
        <div className="flex flex-wrap items-center gap-2">
          <EntityBadge type="model" />
          <StatusBadge status={d.status} />
          {d.openness && <OpennessChip openness={d.openness.category} label={d.openness.label} />}
          <IdentityBadge level={d.identity_confidence} />
          {d.redirected_from && <span className="text-xs text-ink-3">redirected from {d.redirected_from.slug}</span>}
        </div>
        <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div className="min-w-0">
            <h1 className="display text-[30px] md:text-[44px]">{d.name}</h1>
            <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[15px] text-ink-2">
              {d.organization && (
                <Link href={routes.entity({ entity_type: 'company', slug: d.organization.slug })} className="font-medium text-ink hover:text-accent">
                  {d.organization.name}
                </Link>
              )}
              {family ? (
                <Link href={routes.family(family.slug)} className="hover:text-accent">
                  family · {family.name}
                </Link>
              ) : familyLabel ? (
                <span className="text-ink-3" title="Family label from the source, not yet a canonical family">
                  family · {familyLabel}
                </span>
              ) : null}
              {typeof a.release_date === 'string' && (
                <Evidence slug={d.slug} property="release_date" value={a.release_date} display={fmtDate(a.release_date)} fallback={d.provenance?.release_date} entity={entity}>
                  released {fmtDate(a.release_date)}
                </Evidence>
              )}
              {link && (
                <a href={link} target="_blank" rel="noopener noreferrer" className="inline-flex max-w-full min-w-0 items-center gap-1 text-ink-3 hover:text-accent">
                  <span className="truncate">{link.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '').slice(0, 48)}</span> <ExternalLink className="size-3.5 shrink-0" aria-hidden />
                </a>
              )}
            </p>
            {d.description && <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-ink-2">{d.description}</p>}
            <div className="mt-4 flex flex-wrap items-center gap-2" aria-label="Actions">
              <CompareButton e={d} />
              <WatchButton e={d} />
              <Link href={`${routes.graph(d.slug)}?mode=lineage`} className="inline-flex h-9 items-center gap-1.5 border border-rule px-2.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
                <GitFork className="size-3.5" aria-hidden /> Open in Graph
              </Link>
            </div>
          </div>
          <div className="shrink-0 text-xs text-ink-3 lg:text-right">
            <QualityMark q={d.quality?.score} label />
            <p className="mt-1" title={d.updated_at}>
              Updated {fmtAgo(d.updated_at)} · first seen {fmtDate(d.first_seen_at)}
            </p>
            <p className="mono mt-0.5 text-[11px]">{d.id}</p>
          </div>
        </div>
        {strip.length > 0 && (
          <p className="tnum mt-4 flex flex-wrap items-center gap-x-2 gap-y-1 border-y border-rule py-2.5 text-[15px] font-medium text-ink" data-identity-strip>
            {strip.map((s, i) => (
              <span key={s.key} className="inline-flex items-center gap-2">
                {i > 0 && (
                  <span aria-hidden className="text-ink-3">
                    ·
                  </span>
                )}
                <Evidence slug={d.slug} property={s.key} value={a[s.key]} display={s.text} fallback={d.provenance?.[s.key]} entity={entity}>
                  {s.text}
                </Evidence>
              </span>
            ))}
          </p>
        )}
      </header>

      <SectionNav items={nav} />

      <div className="pb-16">
        {/* -------------------------------------------------------------------------------------------- Overview */}
        <Sec id="overview">
          <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_24rem]">
            <div className="min-w-0 space-y-6">
              <div>
                <p className="eyebrow mb-2">Identity</p>
                <IdentityPanel d={d} />
              </div>
              <div>
                <p className="eyebrow mb-2">Openness</p>
                <OpennessBlock openness={d.openness} licence={d.licence} />
              </div>
              {overviewRows.length > 0 && (
                <div>
                  <p className="eyebrow mb-2">Key facts</p>
                  <KeyValue rows={overviewRows} provenance={d.provenance} slug={d.slug} entity={entity} />
                </div>
              )}
            </div>
            <aside className="min-w-0 space-y-6">
              <div>
                <p className="eyebrow mb-2">Relations</p>
                <RelationsBlock relations={d.relations ?? []} exclude={['evaluated_on', 'artifact_of', 'quantized_from']} />
              </div>
              {(d.aliases?.length > 0 || d.identifiers?.length > 0) && (
                <div>
                  <p className="eyebrow mb-2">Identifiers</p>
                  {d.identifiers?.length > 0 && (
                    <dl className="kv [&>div]:grid-cols-[8rem_minmax(0,1fr)]">
                      {d.identifiers.slice(0, 12).map((i) => (
                        <div key={`${i.scheme}:${i.value}`}>
                          <dt className="mono text-[11px]">{i.scheme}</dt>
                          <dd className="mono break-all text-[12px] text-ink">{i.value}</dd>
                        </div>
                      ))}
                    </dl>
                  )}
                  {d.aliases?.length > 0 && (
                    <p className="mt-2 text-xs text-ink-3">
                      Also known as: <span className="text-ink-2">{d.aliases.join(', ')}</span>
                    </p>
                  )}
                  <p className="mono mt-2 break-all text-[11px] text-ink-3">slug {d.slug}</p>
                </div>
              )}
              {related && related.length > 0 && (
                <div>
                  <p className="eyebrow mb-2">Related</p>
                  <ul className="divide-y divide-rule border-y border-rule">
                    {related.slice(0, 8).map((r) => (
                      <li key={r.id} className="flex items-center gap-2 py-1.5 text-sm">
                        <EntityBadge type={r.entity_type} small />
                        <EntityLink e={r} className="truncate" />
                        {r.organization && <span className="ml-auto shrink-0 text-xs text-ink-3">{r.organization.name}</span>}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </aside>
          </div>
        </Sec>

        {present.has('architecture') && (
          <Sec id="architecture">
            <KeyValue rows={archRows} provenance={d.provenance} slug={d.slug} entity={entity} />
          </Sec>
        )}
        {present.has('capabilities') && (
          <Sec id="capabilities">
            <Capabilities d={d} />
          </Sec>
        )}
        {present.has('benchmarks') && (
          <Sec id="benchmarks" count={d.benchmarks?.total_rows ?? d.results?.length} lede={<ComparabilityLegend />} action={{ href: `${routes.compare([d.slug])}`, label: 'Compare with another model' }}>
            <ModelBenchmarksBlock d={d} leaders={benchList?.items ?? null} />
          </Sec>
        )}
        {present.has('providers-pricing') && (
          <Sec id="providers-pricing" count={deployments.length || d.prices?.length} action={{ href: `${routes.prices()}?model=${encodeURIComponent(d.slug)}`, label: 'All offers in the price terminal' }}>
            {deployments.length ? <DeploymentsTable deployments={deployments} modelSlug={d.slug} /> : <PricesTable prices={d.prices ?? []} perspective="model" />}
          </Sec>
        )}
        {present.has('price-history') && (
          <Sec id="price-history" lede="Step lines per provider; amber markers are recorded changes. Click a marker or a row for the evidence behind that price.">
            <div className="grid gap-8 lg:grid-cols-2">
              <PriceHistoryChart history={priceHistory} field="output_per_mtok" modelSlug={d.slug} modelName={d.name} />
              <PriceHistoryChart history={priceHistory} field="input_per_mtok" modelSlug={d.slug} modelName={d.name} />
            </div>
          </Sec>
        )}
        {present.has('hardware-fit') && (
          <Sec id="hardware-fit" count={d.hardware_fit?.length}>
            <HardwareFitBlock rows={d.hardware_fit ?? []} assumptions={d.hardware_fit_assumptions} modelSlug={d.slug} />
          </Sec>
        )}
        {present.has('lineage') && (
          <Sec id="lineage" action={{ href: `${routes.graph(d.slug)}?mode=lineage`, label: 'Open in Graph' }} lede="Explicit derived_from / fine_tuned_from / distilled_from relations stated by sources; artifacts collapsed by kind.">
            <LineageTree self={d} ancestors={lineage.ancestors} descendants={lineage.descendants} artifactKinds={artifactKinds.length ? artifactKinds : lineage.quantizations.length ? [{ kind: 'quantization', count: lineage.quantizations.length }] : []} />
          </Sec>
        )}
        {present.has('versions-artifacts') && (
          <Sec id="versions-artifacts" count={d.artifacts?.total}>
            <div className="grid gap-8 lg:grid-cols-2">
              <div>
                <p className="eyebrow mb-2">Version history</p>
                <VersionHistoryBlock items={d.version_history ?? []} d={d} />
              </div>
              <div>
                <p className="eyebrow mb-2">
                  Artifacts <span className="tnum text-ink-3">{fmtInt(d.artifacts?.total ?? 0)}</span>
                </p>
                <ArtifactsBlock d={d} />
              </div>
            </div>
          </Sec>
        )}
        {present.has('repositories') && (
          <Sec id="repositories" count={d.repositories?.length}>
            <EntityList items={d.repositories ?? []} />
          </Sec>
        )}
        {present.has('papers') && (
          <Sec id="papers" count={d.papers?.length}>
            <EntityList items={d.papers ?? []} />
          </Sec>
        )}
        {present.has('datasets') && (
          <Sec id="datasets" count={datasets.length}>
            <EntityList items={datasets} />
          </Sec>
        )}
        {present.has('timeline') && (
          <Sec id="timeline" count={d.timeline?.length} action={{ href: routes.timeline({ entity: d.slug }), label: 'Full timeline' }}>
            <TimelineList events={d.timeline ?? []} />
          </Sec>
        )}
        <Sec id="change-history" count={property ? undefined : claims?.length} lede="Temporal, append-only claims: a new observation closes the previous claim instead of overwriting it. Rewind the record with the as-of picker.">
          <div className="space-y-6">
            <AsOfPicker value={asofRaw} />
            {asofRaw && <AsOfBlock d={d} asof={asofRaw} payload={asof ? asofPayload : null} />}
            <ClaimHistory d={d} claims={claims} property={property} />
          </div>
        </Sec>
        <Sec id="provenance">
          <div className="space-y-6">
            <ProvenanceSummary provenance={d.provenance} quality={d.quality} />
            <div>
              <p className="eyebrow mb-2">
                Source documents <span className="tnum text-ink-3">{fmtInt(d.sources?.length ?? 0)}</span>
              </p>
              <SourcesTable sources={d.sources ?? []} />
            </div>
            <Note>
              Data quality ({num(d.quality?.score) === null ? 'not computed' : `${Math.round(num(d.quality?.score) as number)}/100`}) measures how well AI Atlas knows this entity — completeness, primary-source ratio, freshness, conflicts — never how good the model is. <Link href="/methodology" className="link">Methodology →</Link>
            </Note>
          </div>
        </Sec>
      </div>
      <CompareTrayBar />
    </Container>
  );
}