import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Badge, MatchBadge } from '@/components/ui/badge';
import { JsonView } from '@/components/ui/json-view';
import { getContributingSources, getChangeEvents } from '@/lib/queries/cancers';
import { CODE_SYSTEM_LABEL, codeUrl } from '@/lib/site';
import { fmtDate, fmtDateTime, humanize } from '@/lib/format';
import type { CancerBundle } from '../load';

export async function SourcesTab({ b }: { b: CancerBundle }) {
  const [contrib, events] = await Promise.all([getContributingSources(b.cancer.id, b.descendants), getChangeEvents('cancer', b.cancer.id)]);
  return (
    <div className="space-y-8">
      <Section id="contributing" kicker="Provenance" title="Sources contributing to this entity" description="Every source that supplied a code, alias, edge, observation or derived value, with the ingest runs involved.">
        {contrib.length ? (
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Source</th>
                  <th>License</th>
                  <th>Contributions</th>
                  <th>Ingest runs</th>
                  <th>Last retrieved</th>
                </tr>
              </thead>
              <tbody>
                {contrib.map((s) => (
                  <tr key={s.slug}>
                    <td>
                      <Link className="ci-link" href={`/source/${s.slug}`}>
                        {s.name}
                      </Link>{' '}
                      <span className="ci-mono text-[11px] text-ink-3">{s.slug}</span>
                    </td>
                    <td>
                      <Badge tone={s.license_status === 'approved' ? 'ok' : 'warn'}>{s.license_status}</Badge>
                    </td>
                    <td className="text-[12.5px]">{s.kinds.map(humanize).join(', ')}</td>
                    <td className="text-[11.5px]">
                      {s.run_ids.length ? (
                        s.run_ids.slice(0, 5).map((r) => (
                          <Link key={r} href={`/admin/runs/${r}`} className="ci-mono ci-link block">
                            {r}
                          </Link>
                        ))
                      ) : (
                        <span className="text-ink-4">—</span>
                      )}
                      {s.run_ids.length > 5 ? <span className="text-ink-3">+{s.run_ids.length - 5} more</span> : null}
                    </td>
                    <td className="whitespace-nowrap text-[12.5px]">{s.last_retrieved ? fmtDateTime(s.last_retrieved) : '—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState compact>No source contribution recorded.</EmptyState>
        )}
      </Section>

      <Section id="codes" kicker="Identifiers" title={`Cross-reference codes (${b.codes.length})`} description="Every upstream identifier is kept with its match type; nothing is buried in JSON.">
        {b.codes.length ? (
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>System</th>
                  <th>Code</th>
                  <th>Match type</th>
                  <th>Source</th>
                </tr>
              </thead>
              <tbody>
                {b.codes.map((k) => {
                  const url = codeUrl(k.system, k.code);
                  return (
                    <tr key={`${k.system}-${k.code}`}>
                      <td>{CODE_SYSTEM_LABEL[k.system] ?? k.system}</td>
                      <td>
                        {url ? (
                          <a className="ci-mono ci-link" href={url} target="_blank" rel="noopener noreferrer">
                            {k.code}
                          </a>
                        ) : (
                          <span className="ci-mono">{k.code}</span>
                        )}
                      </td>
                      <td>
                        <MatchBadge matchType={k.match_type} />
                      </td>
                      <td>
                        {k.source_slug ? (
                          <Link className="ci-link" href={`/source/${k.source_slug}`}>
                            {k.source_slug}
                          </Link>
                        ) : (
                          '—'
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState compact>No cross-reference code.</EmptyState>
        )}
      </Section>

      <Section id="aliases" kicker="Names" title={`Aliases (${b.aliases.length})`}>
        {b.aliases.length ? (
          <div className="ci-table-wrap">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Alias</th>
                  <th>Type</th>
                  <th>Terminology</th>
                  <th>Language</th>
                </tr>
              </thead>
              <tbody>
                {b.aliases.map((a, i) => (
                  <tr key={`${a.alias}-${a.alias_type}-${i}`}>
                    <td>{a.alias}</td>
                    <td>
                      <Badge tone="outline">{a.alias_type}</Badge>
                    </td>
                    <td className="text-[12.5px] text-ink-3">{a.source_terminology ?? a.source_slug ?? '—'}</td>
                    <td className="ci-mono text-[12px]">en</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState compact>No alias recorded.</EmptyState>
        )}
      </Section>

      <Section id="history" kicker="Change history" title="Change events" description="Creation, updates, merges and ranking changes recorded for this entity.">
        {events.length ? (
          <ol className="divide-y divide-rule text-[13.5px]">
            {events.map((e) => (
              <li key={e.id} className="py-2">
                <div className="flex flex-wrap items-baseline gap-2">
                  <Badge>{humanize(e.kind)}</Badge>
                  <span>{e.summary}</span>
                  <span className="ml-auto text-[12px] text-ink-3">{fmtDate(e.created_at)}</span>
                </div>
                {e.ingest_run_id ? (
                  <Link href={`/admin/runs/${e.ingest_run_id}`} className="ci-mono ci-link text-[11.5px]">
                    {e.ingest_run_id}
                  </Link>
                ) : null}
                {e.before || e.after ? (
                  <details className="mt-1 text-[12px]">
                    <summary className="ci-link">diff</summary>
                    <div className="mt-1 grid gap-3 sm:grid-cols-2">
                      <div>
                        <p className="ci-kicker">Before</p>
                        <JsonView data={e.before} />
                      </div>
                      <div>
                        <p className="ci-kicker">After</p>
                        <JsonView data={e.after} />
                      </div>
                    </div>
                  </details>
                ) : null}
              </li>
            ))}
          </ol>
        ) : (
          <EmptyState compact>No change event recorded yet. Created {fmtDate(b.cancer.created_at)}; last updated {fmtDate(b.cancer.updated_at)}.</EmptyState>
        )}
      </Section>
    </div>
  );
}