import { ExternalLink, GitFork } from 'lucide-react';
import Link from 'next/link';
import { ChangeRow } from '@/components/changes/change-row';
import { CompareButton } from '@/components/compare/compare-button';
import { Identity, SourcesTable } from '@/components/entity/blocks';
import { DataStrip, SectionNav } from '@/components/layout/terminal';
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, OpennessBadge, StatusBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { KeyValue } from '@/components/ui/key-value';
import { Container, Note, Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { api, apiD1, apiD3, safe } from '@/lib/api';
import { fmtAgo, fmtDate, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { PROSE_KEYS, routes, SITE_NAME, SITE_URL, typeLabel } from '@/lib/site';
import type { ChangeEvent, EntityDetail, EntitySummary, FamilyRow } from '@/lib/types';

/*
  Organization page 3.0 (server, async): footprint strip → models grouped by family → families → papers → researchers →
  providers operated → repositories/frameworks → timeline split CORPORATE NEWS vs MODEL EVENTS → sources.
  Counts come from the listing APIs (`/models?org=`, `/families?org=`, `/papers?org=`, `/explore/researcher?org=`) and the
  detail relations; what the API does not expose per organization (datasets, benchmarks) is shown as "—" with a definition.
*/

const ORG_TYPES = ['company', 'organization', 'lab', 'university'];
const CORPORATE = new Set(['ANNOUNCEMENT', 'NEW_COMPANY', 'NEW_ORGANIZATION', 'NEW_LAB', 'NEW_UNIVERSITY', 'PROPERTY_CHANGED']);

function relItems(d: EntityDetail, types: string[], predicates?: string[]): EntitySummary[] {
  const out: EntitySummary[] = [];
  const seen = new Set<string>();
  for (const g of d.relations ?? []) {
    if (predicates && !predicates.includes(g.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;
}

type ModelRow = EntitySummary & { family?: { id: string; slug: string; name: string } | null };

function ModelsByFamily({ items, total, org }: { items: ModelRow[]; total: number; org: string }) {
  if (!items.length) return <EmptyState title="No canonical model attributed to this organization">Models are attributed through a stated developer relation or an official model id.</EmptyState>;
  const groups = new Map<string, { label: string; href: string | null; items: ModelRow[] }>();
  for (const m of items) {
    const fam = m.family ?? null;
    const label = fam?.name ?? (typeof m.attributes?.family === 'string' ? (m.attributes.family as string) : 'No family');
    const key = fam?.slug ?? `label:${label}`;
    (groups.get(key) ?? groups.set(key, { label, href: fam ? routes.family(fam.slug) : null, items: [] }).get(key)!).items.push(m);
  }
  const ordered = [...groups.values()].sort((a, b) => b.items.length - a.items.length || a.label.localeCompare(b.label));
  return (
    <>
      <DataTable caption="Models by family" compact>
        <thead>
          <tr>
            <Th>Model</Th>
            <Th num>Params</Th>
            <Th num>Context</Th>
            <Th>Openness</Th>
            <Th>Status</Th>
            <Th>Released</Th>
            <Th num>Quality</Th>
          </tr>
        </thead>
        <tbody>
          {ordered.map((g) => (
            <FamilyRows key={g.label} g={g} />
          ))}
        </tbody>
      </DataTable>
      {total > items.length && (
        <Note className="mt-2">
          Showing {fmtInt(items.length)} of {fmtInt(total)} — <Link href={`/models?org=${encodeURIComponent(org)}`} className="link">all models by this organization →</Link>
        </Note>
      )}
    </>
  );
}
function FamilyRows({ g }: { g: { label: string; href: string | null; items: ModelRow[] } }) {
  return (
    <>
      <tr className="bg-surface-2/60">
        <td colSpan={7} className="!py-1.5">
          <span className="eyebrow inline-flex items-center gap-2">
            {g.href ? (
              <Link href={g.href} className="hover:text-ink">
                {g.label}
              </Link>
            ) : (
              g.label
            )}
            <span className="tnum normal-case tracking-normal text-ink-3">{fmtInt(g.items.length)}</span>
          </span>
        </td>
      </tr>
      {g.items.map((m) => {
        const a = m.attributes ?? {};
        return (
          <tr key={m.id}>
            <Td primary>
              <EntityLink e={m} />
            </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="Openness">{typeof a.openness === 'string' ? <OpennessBadge openness={a.openness} /> : <span className="text-ink-3">—</span>}</Td>
            <Td label="Status">
              <StatusBadge status={typeof a.status === 'string' ? a.status : m.status} />
            </Td>
            <Td label="Released" className="tnum text-ink-2">{typeof a.release_date === 'string' ? fmtDate(a.release_date) : '—'}</Td>
            <Td num label="Quality">
              <QualityMark q={m.quality?.score} />
            </Td>
          </tr>
        );
      })}
    </>
  );
}

function FamiliesTable({ items }: { items: FamilyRow[] }) {
  if (!items.length) return <p className="text-sm text-ink-3">No family recorded for this organization.</p>;
  return (
    <DataTable caption="Families" compact>
      <thead>
        <tr>
          <Th>Family</Th>
          <Th num>Models</Th>
          <Th>First release</Th>
          <Th>Last release</Th>
          <Th>Modalities</Th>
          <Th>Canonical</Th>
        </tr>
      </thead>
      <tbody>
        {items.map((f) => (
          <tr key={f.slug}>
            <Td primary>
              {f.canonical ? (
                <Link href={routes.family(f.slug)} className="text-ink hover:text-accent hover:underline">
                  {f.name}
                </Link>
              ) : (
                <span>{f.name}</span>
              )}
            </Td>
            <Td num label="Models" className="tnum">{fmtInt(f.model_count)}</Td>
            <Td label="First release" className="tnum text-ink-2">{fmtDate(f.first_release)}</Td>
            <Td label="Last release" className="tnum text-ink-2">{fmtDate(f.last_release)}</Td>
            <Td label="Modalities" className="text-xs text-ink-2">{f.modalities?.length ? f.modalities.join(', ') : '—'}</Td>
            <Td label="Canonical">{f.canonical ? <Chip tone="accent">entity</Chip> : <Chip>legacy label</Chip>}</Td>
          </tr>
        ))}
      </tbody>
    </DataTable>
  );
}

function List({ items, empty }: { items: EntitySummary[]; empty: React.ReactNode }) {
  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" />
          {typeof e.attributes?.published_at === 'string' && <span className="ml-auto shrink-0 text-xs text-ink-3">{fmtDate(e.attributes.published_at as string)}</span>}
        </li>
      ))}
    </ul>
  );
}

export async function OrganizationPage({ d, canonical }: { d: EntityDetail; canonical: string }) {
  const a = d.attributes ?? {};
  const [models, families, papers, researchers, news, tl] = await Promise.all([
    safe(api.models({ org: d.slug, limit: 200, sort: 'release' })),
    safe(apiD1.families({ org: d.slug, limit: 50, sort: 'models' })),
    safe(api.papers({ org: d.slug, limit: 30, sort: 'published' })),
    safe(api.explore('researcher', { org: d.slug, limit: 30 })),
    safe(apiD3.changes({ entity: d.slug, type: 'ANNOUNCEMENT', include_backfill: 1, limit: 30 })),
    safe(apiD3.entityTimeline(d.slug, { include_backfill: 1, limit: 100 })),
  ]);
  const modelItems = (models?.items ?? []) as ModelRow[];
  const modelTotal = num(models?.total) ?? num(d.models?.total) ?? modelItems.length;
  const famItems = families?.items ?? [];
  const paperItems = papers?.items ?? d.papers ?? [];
  const researcherItems = (researchers?.items ?? []).filter((r) => r.entity_type === 'researcher');
  const withIds = researcherItems.filter((r) => (r.counts?.claims ?? 0) > 0 || (r.organization && r.organization.slug === d.slug));
  const providers = relItems(d, ['provider'], ['operates', 'owns']);
  const repos = [...(d.repositories ?? []), ...relItems(d, ['repository', 'framework', 'library'])].filter((x, i, arr) => arr.findIndex((y) => y.id === x.id) === i);
  const datasets = relItems(d, ['dataset']);
  const benchmarks = relItems(d, ['benchmark']);
  const newsItems: ChangeEvent[] = news?.items ?? [];
  const modelEvents: ChangeEvent[] = (tl?.items ?? []).filter((e) => !CORPORATE.has(e.event_type) && e.event_type !== 'ENTITY_MERGED');
  const corporateFromTimeline: ChangeEvent[] = (tl?.items ?? []).filter((e) => CORPORATE.has(e.event_type) && !newsItems.some((n) => n.id === e.id));
  const corporate = [...newsItems, ...corporateFromTimeline].sort((x, y) => ((y.occurred_at ?? y.observed_at) < (x.occurred_at ?? x.observed_at) ? -1 : 1));
  const link = ['website', 'official_url'].map((k) => a[k]).find((v): v is string => typeof v === 'string' && /^https?:\/\//.test(v)) ?? null;
  const crumbs = [{ name: SITE_NAME, href: '/' }, { name: 'Organizations', href: '/companies' }, { name: d.name, href: canonical }];
  const ld = { '@context': 'https://schema.org', '@type': 'Organization', name: d.name, url: `${SITE_URL}${canonical}`, description: d.description ?? undefined, alternateName: d.aliases?.length ? d.aliases : undefined, foundingDate: a.founded ? String(a.founded) : undefined, sameAs: link ? [link] : undefined, location: typeof a.headquarters === 'string' ? a.headquarters : undefined };
  const specRows = Object.keys(a)
    .filter((k) => !PROSE_KEYS.has(k) && !['founders', 'leadership'].includes(k))
    .map((k) => ({ key: k, raw: a[k] }));
  const sections = [
    { id: 'models', label: 'Models' },
    { id: 'families', label: 'Families' },
    { id: 'papers', label: 'Papers' },
    { id: 'researchers', label: 'Researchers' },
    { id: 'providers', label: 'Providers' },
    { id: 'repositories', label: 'Code' },
    { id: 'news', label: 'Corporate news' },
    { id: 'model-events', label: 'Model events' },
    { id: 'sources', label: 'Sources' },
  ];

  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-5 pt-4 md:pb-6 md:pt-5">
        <div className="flex flex-wrap items-center gap-2">
          <EntityBadge type={d.entity_type} />
          {typeof a.org_kind === 'string' && a.org_kind.toLowerCase() !== typeLabel(d.entity_type).toLowerCase() && <Chip>{a.org_kind}</Chip>}
          {typeof a.country === 'string' && <Chip className="mono">{a.country}</Chip>}
        </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">
              {typeof a.headquarters === 'string' && <span>{a.headquarters}</span>}
              {a.founded ? <span>· founded {String(a.founded).slice(0, 4)}</span> : null}
              {link && (
                <a href={link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-ink-3 hover:text-accent">
                  {link.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '').slice(0, 48)} <ExternalLink className="size-3.5" 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={`/graph/${encodeURIComponent(d.slug)}?mode=company`} 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 /> Company ecosystem graph
              </Link>
              <Link href={routes.timeline({ entity: d.slug })} 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">
                Timeline
              </Link>
              <Link href={routes.diff({ scope: `org:${d.slug}` })} 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">
                Diff (last 7 days)
              </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>

      <DataStrip
        dense
        items={[
          { label: 'Models', value: fmtInt(modelTotal), definition: 'Canonical model releases attributed to this organization (artifacts and folded variants excluded).', href: '#models' },
          { label: 'Families', value: fmtInt(families?.total ?? famItems.length), definition: 'Model families whose official organization is this one.', href: '#families' },
          { label: 'Papers', value: fmtInt(papers?.total ?? paperItems.length), definition: 'Papers with this organization stated as publisher (arXiv metadata carries no affiliation, so this is often zero).', href: '#papers' },
          { label: 'Researchers', value: fmtInt(researchers?.total ?? researcherItems.length), definition: 'Researcher records affiliated with this organization by a stated relation.', href: '#researchers' },
          { label: 'Datasets', value: datasets.length ? fmtInt(datasets.length) : '—', definition: 'Datasets linked to this organization by a stated relation; the API has no per-organization dataset count.' },
          { label: 'Benchmarks', value: benchmarks.length ? fmtInt(benchmarks.length) : '—', definition: 'Benchmarks created by this organization (stated relation). Results by this organization’s models live on each leaderboard (?org=).' },
          { label: 'Providers', value: fmtInt(providers.length), definition: 'Inference providers operated or owned by this organization.', href: '#providers' },
          { label: 'Repositories', value: fmtInt(repos.length), definition: 'Repositories, frameworks and libraries linked by a stated relation.', href: '#repositories' },
          { label: 'Announcements', value: fmtInt(news?.total ?? corporate.length), definition: 'ANNOUNCEMENT events from this organization’s own news pages (including historical backfill).', href: '#news' },
        ]}
      />
      <SectionNav items={sections} className="mt-3" />

      <div className="grid gap-10 pb-16 lg:grid-cols-[minmax(0,1fr)_22rem]">
        <div className="min-w-0">
          <Section id="models" eyebrow="Models" title={<>Models <span className="tnum text-base font-normal text-ink-3">{fmtInt(modelTotal)}</span></>} lede="Grouped by family (canonical family entity when known, legacy label otherwise)." action={{ href: `/models?org=${encodeURIComponent(d.slug)}`, label: 'Filter in Models' }}>
            <ModelsByFamily items={modelItems} total={modelTotal} org={d.slug} />
          </Section>
          <Section id="families" eyebrow="Families" title={<>Families <span className="tnum text-base font-normal text-ink-3">{fmtInt(families?.total ?? famItems.length)}</span></>}>
            <FamiliesTable items={famItems} />
          </Section>
          <Section id="papers" eyebrow="Research" title={<>Papers <span className="tnum text-base font-normal text-ink-3">{fmtInt(papers?.total ?? paperItems.length)}</span></>} action={{ href: `/papers?org=${encodeURIComponent(d.slug)}`, label: 'All' }}>
            <List items={paperItems} empty={<>No paper is attributed to {d.name}: arXiv metadata carries author names but no affiliation, and a paper is linked to an organization only when an official model card or lab page cites it.</>} />
          </Section>
          <Section id="researchers" eyebrow="People" title={<>Researchers <span className="tnum text-base font-normal text-ink-3">{fmtInt(withIds.length)}</span></>} lede="Only researcher records with an identifier or a stated affiliation are listed.">
            <List items={withIds} empty={<>No researcher is affiliated with {d.name} by a stated relation. The atlas's researcher rows come from arXiv author lists (name only, no identifier, no affiliation) and are not attributed to organizations.</>} />
            {researcherItems.length > withIds.length && <Note className="mt-2">{fmtInt(researcherItems.length - withIds.length)} name-only legacy rows omitted.</Note>}
          </Section>
          <Section id="providers" eyebrow="Serving" title={<>Providers operated <span className="tnum text-base font-normal text-ink-3">{fmtInt(providers.length)}</span></>}>
            <List items={providers} empty="No provider operated by this organization is recorded." />
          </Section>
          <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 or framework linked." />
          </Section>
          <Section id="news" eyebrow="Timeline" title={<>Corporate news <span className="tnum text-base font-normal text-ink-3">{fmtInt(news?.total ?? corporate.length)}</span></>} lede="ANNOUNCEMENT events from the organization's own channels, newest first (dates are publication dates when stated).">
            {corporate.length === 0 ? (
              <EmptyState title="No announcement recorded">The news connector for this organization has not produced announcements yet.</EmptyState>
            ) : (
              <ul className="border-t border-rule">
                {corporate.slice(0, 30).map((e) => (
                  <ChangeRow key={e.id} e={e} showDate live={false} />
                ))}
              </ul>
            )}
          </Section>
          <Section id="model-events" eyebrow="Timeline" title={<>Model events <span className="tnum text-base font-normal text-ink-3">{fmtInt(modelEvents.length)}</span></>} lede="New models, releases, deprecations, price and property changes for the models this organization develops." action={{ href: routes.timeline({ entity: d.slug }), label: 'Full timeline' }}>
            {modelEvents.length === 0 ? (
              <EmptyState title="No model event recorded" />
            ) : (
              <ul className="border-t border-rule">
                {modelEvents.slice(0, 40).map((e) => (
                  <ChangeRow key={e.id} e={e} showDate live={false} />
                ))}
              </ul>
            )}
            {modelEvents.length > 40 && <Note className="mt-2">First 40 of {fmtInt(modelEvents.length)} loaded — the full timeline has cursor paging.</Note>}
          </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 lg:pt-8">
          <section>
            <p className="eyebrow mb-2 inline-flex items-center gap-1">
              Record <Hint align="right" text="Every value shows its source, tier and observation time; click a value for the claim behind it." />
            </p>
            <KeyValue rows={specRows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: d.entity_type }} dense />
          </section>
          <section>
            <p className="eyebrow mb-2">Identity</p>
            <Identity d={d} />
            <p className="mono mt-2 break-all text-[11px] text-ink-3">slug {d.slug}</p>
          </section>
          <section>
            <p className="eyebrow mb-2">Definition</p>
            <p className="text-xs text-ink-3">Organizations = companies, labs and universities ({ORG_TYPES.join(', ')}). Counts on this page are live from the listing APIs and the stated relations of this record.</p>
          </section>
        </aside>
      </div>
    </Container>
  );
}