import type { Metadata } from 'next';
import Link from 'next/link';
import { TOP_LEVEL_CANCERS } from '@cancerindex/ontology';
import { PageHeader, Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Badge } from '@/components/ui/badge';
import { Tree } from '@/components/data/tree';
import { hierarchyTypes, rootsOf, orphanCount, anatomicalView } from '@/lib/queries/taxonomy';
import { resolveTopLevel } from '@/lib/queries/cancers';
import { fmtInt, humanize } from '@/lib/format';
import { str, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Taxonomy', description: 'Browse the cancer taxonomy by NCIt hierarchy, OncoTree hierarchy or anatomical site.' };
export const revalidate = 3600;

export default async function TaxonomyPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const types = await hierarchyTypes();
  const available = types.map((t) => t.hierarchy_type);
  const requested = str(sp, 'view', '');
  const view = requested === 'anatomy' ? 'anatomy' : available.includes(requested) ? requested : available.includes('ncit') ? 'ncit' : (available[0] ?? 'ncit');

  const topLevel = await resolveTopLevel(TOP_LEVEL_CANCERS.map((t) => t.ncit));
  const [roots, orphans, sites] = await Promise.all([view === 'anatomy' ? Promise.resolve([]) : rootsOf(view), view === 'anatomy' ? Promise.resolve(0) : orphanCount(view), view === 'anatomy' ? anatomicalView() : Promise.resolve([])]);

  const views = [...available.map((t) => ({ key: t, label: t === 'ncit' ? 'NCIt hierarchy' : t === 'oncotree' ? 'OncoTree hierarchy' : `${humanize(t)} hierarchy`, n: types.find((x) => x.hierarchy_type === t)?.n ?? 0 })), { key: 'anatomy', label: 'Anatomical view', n: null as number | null }];
  if (!available.includes('ncit')) views.unshift({ key: 'ncit', label: 'NCIt hierarchy', n: 0 });

  return (
    <div>
      <PageHeader kicker="Taxonomy" title="Tree browser" lede="Several hierarchies coexist: the NCIt-derived disease tree, the OncoTree clinical tree and the anatomical grouping. Children load on demand. Non-malignant and precursor entities are shown in grey." />

      <nav aria-label="Hierarchy" className="flex flex-wrap gap-2 border-y border-rule py-2 text-[13.5px]">
        {views.map((v) => (
          <Link key={v.key} href={`/taxonomy?view=${v.key}`} aria-current={view === v.key ? 'page' : undefined} className={`border px-2.5 py-1 no-underline ${view === v.key ? 'border-accent bg-accent-soft text-accent-2' : 'border-rule text-ink-2 hover:border-accent'}`}>
            {v.label}
            {v.n != null ? <span className="ci-num ml-1.5 text-[11px] text-ink-3">{fmtInt(v.n)} edges</span> : null}
          </Link>
        ))}
      </nav>

      <div className="mt-6 grid gap-8 lg:grid-cols-[1fr_320px]">
        <div>
          {view === 'anatomy' ? (
            sites.length ? (
              <div className="space-y-6">
                {sites.map((s) => (
                  <Section key={s.id} id={`site-${s.slug}`} level={3} title={s.name} description={s.ncit_code ? `NCIt ${s.ncit_code} · ${s.cancers.length} linked ${s.cancers.length === 1 ? 'entity' : 'entities'}` : `${s.cancers.length} linked entities`}>
                    {s.cancers.length ? (
                      <ul className="columns-1 gap-6 text-[13.5px] sm:columns-2 lg:columns-3">
                        {s.cancers.map((c) => (
                          <li key={`${c.id}-${c.relation}`} className="flex items-baseline gap-1.5 py-0.5">
                            <Link href={`/cancer/${c.slug}`} className={`ci-link ${c.malignant ? '' : 'text-ink-3'}`}>
                              {c.canonical_name}
                            </Link>
                            {c.relation !== 'primary' ? <Badge tone="outline">{c.relation}</Badge> : null}
                          </li>
                        ))}
                      </ul>
                    ) : (
                      <EmptyState compact>No entity linked to this site yet.</EmptyState>
                    )}
                  </Section>
                ))}
              </div>
            ) : (
              <EmptyState title="Anatomical sites not yet available">Anatomical sites are populated by the terminology connectors (OncoTree tissues, NCIt anatomy).</EmptyState>
            )
          ) : roots.length ? (
            <>
              <p className="mb-2 text-[12.5px] text-ink-3">
                {fmtInt(roots.length)} root {roots.length === 1 ? 'node' : 'nodes'}
                {orphans > 0 ? (
                  <>
                    {' '}
                    · {fmtInt(orphans)} entities have no edge in this hierarchy and are listed in the{' '}
                    <Link className="ci-link" href="/cancers">
                      explorer
                    </Link>
                  </>
                ) : null}
              </p>
              <Tree roots={roots} hierarchyType={view} />
            </>
          ) : (
            <EmptyState title={`${view === 'ncit' ? 'NCIt' : humanize(view)} hierarchy not yet available`} knows={views.filter((v) => v.key !== view && (v.n == null || v.n > 0)).map((v) => ({ label: v.label, href: `/taxonomy?view=${v.key}` }))}>
              {view === 'ncit' ? 'The NCIt connector has not run on this environment yet. NCIt is the primary disease hierarchy; OncoTree edges are available meanwhile.' : 'No edges of this type have been ingested.'}
            </EmptyState>
          )}
        </div>

        <aside>
          <Section id="top-level" level={3} kicker="Ranking scope" title="Top-level set (36)">
            <p className="mb-2 text-[12.5px] text-ink-3">Mutually exclusive registry site groups used for global rankings, anchored to NCIt concepts. Greyed items are not yet indexed.</p>
            <ul className="text-[13px]">
              {TOP_LEVEL_CANCERS.map((t) => {
                const m = topLevel.get(t.ncit);
                return (
                  <li key={t.key} className="flex items-baseline justify-between gap-2 border-b border-rule py-1">
                    {m ? (
                      <Link href={`/cancer/${m.slug}`} className="ci-link truncate">
                        {t.name}
                      </Link>
                    ) : (
                      <span className="truncate text-ink-3">{t.name}</span>
                    )}
                    <span className="ci-mono shrink-0 text-[10.5px] text-ink-4">{t.icd10.join(', ')}</span>
                  </li>
                );
              })}
            </ul>
          </Section>
        </aside>
      </div>
    </div>
  );
}