import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { Evidence } from '@/components/evidence/evidence';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { ArtifactKindChip, OpennessChip } from '@/components/models/badges';
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 { fmtAgo, fmtBytes, fmtDate, fmtGb, fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { ModelDetail } from '@/lib/types';
import { ProvenanceSummary, RelationsBlock, SourcesTable, TimelineList } from './blocks';
import { HardwareFitBlock } from './model-blocks';

/*
  Artifact page: a checkpoint / quantisation / conversion / packaging of a canonical model. Header points prominently to the
  canonical model; the artifact's own facts (file size, quant format, dtype, downloads, publisher) are shown with evidence.
*/

const FACT_KEYS = ['quant_format', 'quantization', 'weights_dtype', 'file_size_gb', 'metric.downloads', 'metric.likes', 'hf_repo', 'base_model', 'quantized_by', 'pipeline_tag', 'library_name', 'gated', 'access', 'license', 'release_date', 'last_modified', 'model_card_url', 'tags'];

export function describeArtifact(d: ModelDetail): string {
  const a = d.attributes ?? {};
  const bits: string[] = [];
  if (typeof a.quant_format === 'string') bits.push(String(a.quant_format).toUpperCase());
  if (num(a.file_size_gb) !== null) bits.push(fmtGb(a.file_size_gb, 1));
  if (num(a['metric.downloads']) !== null) bits.push(`${fmtInt(a['metric.downloads'])} downloads`);
  return `${d.name} is a ${d.artifact_kind ?? 'packaging'} of ${d.canonical?.name ?? 'a canonical model'}${d.organization ? ` published by ${d.organization.name}` : ''}${bits.length ? ` — ${bits.join(', ')}` : ''}. Not an independent model: parameters, benchmarks and prices live on the canonical model page. ${SITE_NAME}.`.slice(0, 300);
}

export function ArtifactPage({ d, canonical }: { d: ModelDetail; canonical: string }) {
  const a = d.attributes ?? {};
  const entity = { name: d.name, entity_type: d.entity_type };
  const format = typeof a.quant_format === 'string' ? String(a.quant_format).toUpperCase() : Array.isArray(a.weights_dtype) && a.weights_dtype.length ? (a.weights_dtype as string[]).join('/') : null;
  const rows: KVRow[] = FACT_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 hf = typeof a.hf_repo === 'string' ? `https://huggingface.co/${a.hf_repo}` : typeof a.model_card_url === 'string' ? a.model_card_url : null;
  const ld = {
    '@context': 'https://schema.org',
    '@type': 'SoftwareSourceCode',
    name: d.name,
    url: `${SITE_URL}${canonical}`,
    description: d.description ?? describeArtifact(d),
    isBasedOn: d.canonical ? `${SITE_URL}${routes.entity(d.canonical)}` : undefined,
    publisher: d.organization ? { '@type': 'Organization', name: d.organization.name } : undefined,
    fileFormat: typeof a.quant_format === 'string' ? a.quant_format : undefined,
    contentSize: num(a.file_size_gb) !== null ? fmtBytes((num(a.file_size_gb) as number) * 1e9) : undefined,
    codeRepository: hf ?? undefined,
  };
  const quants = Array.isArray(a.quantization) ? (a.quantization as string[]) : [];
  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <ViewBeacon path={canonical} />
      <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.canonical && (
            <>
              <li aria-hidden>/</li>
              <li>
                <Link href={routes.entity(d.canonical)} className="hover:text-ink">
                  {d.canonical.name}
                </Link>
              </li>
            </>
          )}
          <li aria-hidden>/</li>
          <li className="text-ink-2">{d.name}</li>
        </ol>
      </nav>

      <header className="pb-6 pt-4 md:pt-5" data-artifact-header>
        <div className="flex flex-wrap items-center gap-2">
          <EntityBadge type="artifact" />
          <ArtifactKindChip kind={d.artifact_kind} />
          {format && <span className="mono text-xs text-ink-2">{format}</span>}
          {typeof a.openness === 'string' && <OpennessChip openness={a.openness} />}
          <StatusBadge status={d.status !== 'active' ? d.status : null} />
          {d.canonical && (
            <span className="text-xs text-ink-3">
              of <EntityLink e={d.canonical} className="font-medium text-ink-2" />
            </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-[28px] md:text-[40px]">{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 && (
                <span>
                  published by{' '}
                  <Link href={routes.entity({ entity_type: 'company', slug: d.organization.slug })} className="font-medium text-ink hover:text-accent">
                    {d.organization.name}
                  </Link>
                </span>
              )}
              {hf && (
                <a href={hf} 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">{hf.replace(/^https?:\/\/(www\.)?/, '').slice(0, 56)}</span> <ExternalLink className="size-3.5 shrink-0" aria-hidden />
                </a>
              )}
            </p>
            {d.canonical ? (
              <p className="mt-4 border-l-2 border-accent bg-accent-soft/40 px-3 py-2 text-sm text-ink-2" data-artifact-note>
                This is a {d.artifact_kind ?? 'packaging'} of{' '}
                <Link href={routes.entity(d.canonical)} className="font-semibold text-ink hover:text-accent">
                  {d.canonical.name}
                </Link>
                , not an independent model. Parameters, benchmarks, prices and lineage are recorded on the canonical model.{' '}
                <Link href={routes.entity(d.canonical)} className="link">
                  Open {d.canonical.name} →
                </Link>
              </p>
            ) : (
              <Note className="mt-4">The canonical model of this artifact is not resolved yet — it is listed as an artifact because its name, repo or metadata identify it as a re-packaging.</Note>
            )}
            {d.description && <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-ink-2">{d.description}</p>}
          </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>
        <dl className="mt-5 grid grid-cols-2 gap-x-6 gap-y-3 border-y border-rule py-3 sm:grid-cols-4" data-artifact-strip>
          {[
            { key: 'file_size_gb', label: 'File size', value: num(a.file_size_gb) === null ? null : fmtGb(a.file_size_gb, 1) },
            { key: 'quant_format', label: 'Format', value: format },
            { key: 'metric.downloads', label: 'Downloads', value: num(a['metric.downloads']) === null ? null : fmtInt(a['metric.downloads']) },
            { key: 'release_date', label: 'Published', value: typeof a.release_date === 'string' ? fmtDate(a.release_date) : typeof a.last_modified === 'string' ? fmtDate(a.last_modified) : null },
          ].map((c) => (
            <div key={c.key} className="min-w-0">
              <dt className="eyebrow">{c.label}</dt>
              <dd className="tnum mt-0.5 truncate text-[15px] font-medium text-ink">
                {c.value === null ? (
                  <span className="text-ink-3">—</span>
                ) : (
                  <Evidence slug={d.slug} property={c.key} value={a[c.key]} display={c.value} fallback={d.provenance?.[c.key]} entity={entity}>
                    {c.value}
                  </Evidence>
                )}
              </dd>
            </div>
          ))}
        </dl>
      </header>

      <div className="grid gap-10 pb-16 lg:grid-cols-[minmax(0,1fr)_22rem]">
        <div className="min-w-0 space-y-10">
          <section>
            <p className="eyebrow mb-2">Artifact facts</p>
            <KeyValue rows={rows} provenance={d.provenance} slug={d.slug} entity={entity} />
            {quants.length > 0 && <Note className="mt-2">{fmtInt(quants.length)} quantisation levels in this repository ({quants.slice(0, 8).join(', ')}{quants.length > 8 ? '…' : ''}).</Note>}
          </section>
          {d.hardware_fit && d.hardware_fit.length > 0 && (
            <section>
              <p className="eyebrow mb-2">Hardware fit (this packaging)</p>
              <HardwareFitBlock rows={d.hardware_fit} assumptions={d.hardware_fit_assumptions} modelSlug={d.canonical?.slug ?? d.slug} />
            </section>
          )}
          {d.timeline?.length > 0 && (
            <section>
              <p className="eyebrow mb-2">Timeline</p>
              <TimelineList events={d.timeline} slug={d.slug} />
            </section>
          )}
          <section>
            <p className="eyebrow mb-2">Provenance</p>
            <ProvenanceSummary provenance={d.provenance} quality={d.quality} />
            <div className="mt-4">
              <SourcesTable sources={d.sources ?? []} />
            </div>
          </section>
        </div>
        <aside className="min-w-0 space-y-8">
          <section>
            <p className="eyebrow mb-2">Relations</p>
            <RelationsBlock relations={d.relations ?? []} />
          </section>
          {d.canonical && (
            <section>
              <p className="eyebrow mb-2">Canonical model</p>
              <p className="text-sm">
                <EntityLink e={d.canonical} className="font-medium" />
                {d.canonical.organization && <span className="block text-xs text-ink-3">{d.canonical.organization.name}</span>}
              </p>
              <p className="mt-2 text-xs text-ink-3">
                Compare packagings, prices and benchmarks there. <Link href={`${routes.graph(d.canonical.slug)}?mode=lineage`} className="link">Lineage graph →</Link>
              </p>
            </section>
          )}
          {(d.aliases?.length > 0 || d.identifiers?.length > 0) && (
            <section>
              <p className="eyebrow mb-2">Identifiers</p>
              <dl className="kv [&>div]:grid-cols-[8rem_minmax(0,1fr)]">
                {d.identifiers.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: {d.aliases.join(', ')}</p>}
              <p className="mono mt-2 break-all text-[11px] text-ink-3">slug {d.slug}</p>
            </section>
          )}
        </aside>
      </div>
    </Container>
  );
}