import { ExternalLink, FileText } from 'lucide-react';
import Link from 'next/link';
import { SourcesTable, TimelineList } from '@/components/entity/blocks';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { BreadcrumbLd, Breadcrumbs } from '@/components/meta/breadcrumb-ld';
import { WatchButton } from '@/components/watchlist/watch-button';
import { Chip, EntityBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { KeyValue } from '@/components/ui/key-value';
import { Container, Note, Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { fmtAgo, fmtDate, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL, typeLabel } from '@/lib/site';
import type { EntityDetail, EntitySummary } from '@/lib/types';

/*
  Paper page (server, async). Sections: header (title, published, venue, arXiv, PDF/code) → abstract → authors (researcher
  pages when the `authored` relation names them) → organizations → models introduced (`described_by` inbound) → datasets →
  benchmarks → repositories → related papers (shared entities) → sources → timeline. Everything comes from the detail
  payload's relations; nothing is inferred beyond grouping by entity type.
*/

function relItems(d: EntityDetail, types: string[], predicate?: string): EntitySummary[] {
  const out: EntitySummary[] = [];
  const seen = new Set<string>();
  for (const g of d.relations ?? []) {
    if (predicate && g.predicate !== predicate) continue;
    for (const it of g.items) {
      if (!types.includes(it.entity_type) || seen.has(it.id)) continue;
      seen.add(it.id);
      out.push(it);
    }
  }
  return out;
}

function ModelsIntroduced({ items }: { items: EntitySummary[] }) {
  if (!items.length) return <EmptyState title="No model links this paper yet">Model pages link papers through their model cards and documentation; the relation is written only when a source states it.</EmptyState>;
  return (
    <DataTable caption="Models introduced or described" compact>
      <thead>
        <tr>
          <Th>Model</Th>
          <Th>Type</Th>
          <Th>Organization</Th>
          <Th num>Params</Th>
          <Th num>Context</Th>
          <Th>Released</Th>
        </tr>
      </thead>
      <tbody>
        {items.map((m) => {
          const a = m.attributes ?? {};
          return (
            <tr key={m.id}>
              <Td primary>
                <EntityLink e={m} />
              </Td>
              <Td label="Type">
                <EntityBadge type={m.entity_type} small />
              </Td>
              <Td label="Organization" className="text-ink-2">{m.organization?.name ?? '—'}</Td>
              <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="Released" className="tnum text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : '—'}</Td>
            </tr>
          );
        })}
      </tbody>
    </DataTable>
  );
}

function List({ items, empty }: { items: EntitySummary[]; empty: string }) {
  if (!items.length) return <p className="text-sm text-ink-3">{empty}</p>;
  return (
    <ul className="divide-y divide-rule border-y border-rule">
      {items.map((e) => (
        <li key={e.id} className="flex items-center gap-2 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>
  );
}

export async function PaperPage({ d, canonical }: { d: EntityDetail; canonical: string }) {
  const a = d.attributes ?? {};
  const authors: string[] = Array.isArray(a.authors) ? (a.authors as unknown[]).map(String) : [];
  const researchers = relItems(d, ['researcher'], 'authored');
  const byName = new Map(researchers.map((r) => [r.name.toLowerCase(), r]));
  const models = relItems(d, ['model', 'artifact', 'quantization']);
  const datasets = relItems(d, ['dataset']);
  const benchmarks = relItems(d, ['benchmark']);
  const repos = [...relItems(d, ['repository', 'framework', 'library']), ...(d.repositories ?? [])].filter((x, i, arr) => arr.findIndex((y) => y.id === x.id) === i);
  const orgs = relItems(d, ['company', 'organization', 'lab', 'university']);
  const related = await safe(api.entityRelated(d.slug, 12));
  const relatedPapers = (related?.items ?? []).filter((r) => r.entity_type === 'paper' && r.id !== d.id);
  const relatedOther = (related?.items ?? []).filter((r) => r.entity_type !== 'paper' && r.id !== d.id);
  const arxiv = typeof a.arxiv_id === 'string' ? a.arxiv_id : d.identifiers?.find((i) => i.scheme === 'arxiv')?.value;
  const pdf = typeof a.pdf_url === 'string' ? a.pdf_url : arxiv ? `https://arxiv.org/pdf/${arxiv}` : null;
  const code = typeof a.code_url === 'string' ? a.code_url : null;
  const cats = [...new Set([...(typeof a.primary_category === 'string' ? [a.primary_category] : []), ...(Array.isArray(a.categories) ? (a.categories as unknown[]).map(String) : [])])];
  const crumbs = [{ name: SITE_NAME, href: '/' }, { name: 'Research', href: '/papers' }, { name: d.name, href: canonical }];
  const ld = {
    '@context': 'https://schema.org',
    '@type': 'ScholarlyArticle',
    headline: d.name,
    name: d.name,
    url: `${SITE_URL}${canonical}`,
    datePublished: typeof a.published_at === 'string' ? a.published_at : undefined,
    author: authors.slice(0, 30).map((n) => ({ '@type': 'Person', name: n })),
    abstract: typeof a.abstract === 'string' ? a.abstract : undefined,
    sameAs: [pdf, arxiv ? `https://arxiv.org/abs/${arxiv}` : null].filter(Boolean),
    identifier: arxiv ? { '@type': 'PropertyValue', propertyID: 'arxiv', value: arxiv } : undefined,
    publisher: d.organization ? { '@type': 'Organization', name: d.organization.name } : undefined,
  };
  const specRows = ['published_at', 'venue', 'doi', 'arxiv_id', 'primary_category', 'pdf_url', 'code_url', 'updated_at'].filter((k) => a[k] !== undefined && a[k] !== null && a[k] !== '').map((k) => ({ key: k, raw: a[k] }));

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <BreadcrumbLd items={crumbs} />
      <ViewBeacon path={canonical} />
      <Breadcrumbs items={crumbs} />
      <header className="pb-6 pt-4 md:pb-8 md:pt-5">
        <div className="flex flex-wrap items-center gap-2">
          <EntityBadge type="paper" />
          {cats.map((c) => (
            <Link key={c} href={`/papers?category=${encodeURIComponent(c)}`}>
              <Chip tone={c === a.primary_category ? 'accent' : 'neutral'} className="mono">{c}</Chip>
            </Link>
          ))}
        </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-[26px] leading-tight md:text-[36px]">{d.name}</h1>
            <p className="tnum mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[15px] text-ink-2">
              {typeof a.published_at === 'string' && <span>Published {fmtDate(a.published_at)}</span>}
              {typeof a.venue === 'string' && <span>· {a.venue}</span>}
              {arxiv && (
                <a href={`https://arxiv.org/abs/${arxiv}`} target="_blank" rel="noopener noreferrer" className="mono inline-flex items-center gap-1 text-ink-3 hover:text-accent">
                  arXiv:{arxiv} <ExternalLink className="size-3.5" aria-hidden />
                </a>
              )}
            </p>
            <div className="mt-4 flex flex-wrap items-center gap-2" aria-label="Actions">
              {pdf && (
                <a href={pdf} target="_blank" rel="noopener noreferrer" 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">
                  <FileText className="size-3.5" aria-hidden /> PDF
                </a>
              )}
              {code && (
                <a href={code} target="_blank" rel="noopener noreferrer" 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">
                  Code <ExternalLink className="size-3.5" aria-hidden />
                </a>
              )}
              <WatchButton e={d} />
              <Link href={`/graph/${encodeURIComponent(d.slug)}?mode=research`} 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">
                Research 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>
      </header>

      <div className="grid gap-10 pb-16 lg:grid-cols-[minmax(0,1fr)_22rem]">
        <div className="min-w-0">
          {typeof a.abstract === 'string' && (
            <Section id="abstract" eyebrow="Abstract" hairline={false} className="pt-0">
              <p className="prose-atlas max-w-3xl text-[15px] leading-relaxed text-ink-2">{a.abstract}</p>
            </Section>
          )}
          <Section id="authors" eyebrow="Authors" title={<>Authors <span className="tnum text-base font-normal text-ink-3">{fmtInt(authors.length || researchers.length)}</span></>}>
            {authors.length === 0 && researchers.length === 0 ? (
              <p className="text-sm text-ink-3">Author list not stated by the source.</p>
            ) : (
              <p className="flex flex-wrap gap-x-3 gap-y-1 text-sm">
                {(authors.length ? authors : researchers.map((r) => r.name)).map((n, i) => {
                  const r = byName.get(n.toLowerCase());
                  return r ? (
                    <Link key={`${n}-${i}`} href={routes.entity(r)} className="text-ink hover:text-accent hover:underline">
                      {n}
                    </Link>
                  ) : (
                    <span key={`${n}-${i}`} className="text-ink-2">
                      {n}
                    </span>
                  );
                })}
              </p>
            )}
            <Note className="mt-2">Linked names open researcher pages (created from the paper's author list; name-only, no affiliation unless a source states it). Unlinked names have no researcher record yet.</Note>
          </Section>
          <Section id="organizations" eyebrow="Organizations" title={<>Organizations <span className="tnum text-base font-normal text-ink-3">{fmtInt(orgs.length + (d.organization ? 1 : 0))}</span></>}>
            {d.organization || orgs.length ? (
              <List items={[...(d.organization ? [{ id: d.organization.id, entity_type: 'company', slug: d.organization.slug, name: d.organization.name, description: null, status: 'active', organization: null, attributes: {}, quality: {}, counts: {}, first_seen_at: '', last_seen_at: '', updated_at: '' } as EntitySummary] : []), ...orgs]} empty="" />
            ) : (
              <p className="text-sm text-ink-3">No organization stated. arXiv metadata does not carry affiliations; an organization is linked only when a model card or lab page cites the paper.</p>
            )}
          </Section>
          <Section id="models" eyebrow="Models" title={<>Models introduced or described <span className="tnum text-base font-normal text-ink-3">{fmtInt(models.length)}</span></>} lede="Inbound described_by relations from model cards and documentation.">
            <ModelsIntroduced items={models} />
          </Section>
          <div className="grid gap-8 md:grid-cols-2">
            <Section id="datasets" eyebrow="Datasets" title={<>Datasets used <span className="tnum text-base font-normal text-ink-3">{fmtInt(datasets.length)}</span></>}>
              <List items={datasets} empty="No dataset relation recorded." />
            </Section>
            <Section id="benchmarks" eyebrow="Benchmarks" title={<>Benchmarks used <span className="tnum text-base font-normal text-ink-3">{fmtInt(benchmarks.length)}</span></>}>
              <List items={benchmarks} empty="No benchmark relation recorded." />
            </Section>
          </div>
          <Section id="repositories" eyebrow="Code" title={<>Repositories & frameworks <span className="tnum text-base font-normal text-ink-3">{fmtInt(repos.length)}</span></>}>
            <List items={repos} empty="No repository linked." />
          </Section>
          <Section id="related" eyebrow="Related" title={<>Related papers <span className="tnum text-base font-normal text-ink-3">{fmtInt(relatedPapers.length)}</span></>} lede="Papers sharing an organization, a family or a relation with this one.">
            <List items={relatedPapers} empty="No related paper found through shared entities." />
            {relatedOther.length > 0 && (
              <>
                <p className="eyebrow mb-1.5 mt-5">Other related entities</p>
                <List items={relatedOther} empty="" />
              </>
            )}
          </Section>
          <Section id="timeline" eyebrow="Timeline" title={<>Timeline <span className="tnum text-base font-normal text-ink-3">{fmtInt(d.timeline?.length ?? 0)}</span></>}>
            <TimelineList events={d.timeline ?? []} slug={d.slug} />
          </Section>
          <Section id="sources" eyebrow="Sources" title={<>Sources <span className="tnum text-base font-normal text-ink-3">{fmtInt(d.sources?.length ?? 0)}</span></>}>
            <SourcesTable sources={d.sources ?? []} />
          </Section>
        </div>
        <aside className="min-w-0 space-y-8">
          <section>
            <p className="eyebrow mb-2">Record</p>
            <KeyValue rows={specRows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: d.entity_type }} dense />
            <p className="mono mt-2 break-all text-[11px] text-ink-3">slug {d.slug}</p>
          </section>
          {d.identifiers?.length > 0 && (
            <section>
              <p className="eyebrow mb-2">Identifiers</p>
              <ul className="space-y-0.5 text-xs">
                {d.identifiers.map((i) => (
                  <li key={`${i.scheme}:${i.value}`} className="flex gap-2">
                    <span className="mono text-ink-3">{i.scheme}</span>
                    <span className="mono truncate text-ink-2">{i.value}</span>
                  </li>
                ))}
              </ul>
            </section>
          )}
          <section>
            <p className="eyebrow mb-2">Type</p>
            <p className="text-sm text-ink-2">
              {typeLabel(d.entity_type)} · <Link href={routes.methodology()} className="link">how papers are recorded</Link>
            </p>
          </section>
        </aside>
      </div>
    </Container>
  );
}