import Link from 'next/link';
import { fmtInt, fmtParams, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { EntitySummary } from '@/lib/types';

/*
  Compact server-rendered SVG lineage tree: ancestors → this model → descendants, artifacts collapsed by kind with counts.
  Not the force graph (components/graph is not ours); "Open in Graph" links to the interactive explorer in lineage mode.
*/

type Node = { id: string; label: string; sub?: string; href?: string; kind: 'model' | 'this' | 'artifact' };

const W = 720;
const ROW = 34;
const BOX_W = 200;
const BOX_H = 28;
const PAD = 8;

function trunc(s: string, n: number): string {
  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
}

function toNode(e: EntitySummary): Node {
  const p = num(e.attributes?.parameter_count);
  return { id: e.id, label: e.name, sub: p !== null ? fmtParams(p) : e.organization?.name ?? undefined, href: routes.entity(e), kind: 'model' };
}

export function LineageTree({ self, ancestors, descendants, artifactKinds, className }: { self: EntitySummary; ancestors: EntitySummary[]; descendants: EntitySummary[]; artifactKinds: { kind: string; count: number }[]; className?: string }) {
  const left = ancestors.slice(0, 6).map(toNode);
  const rightModels = descendants.slice(0, 6).map(toNode);
  const rightArtifacts: Node[] = artifactKinds.filter((k) => k.count > 0).map((k) => ({ id: `kind-${k.kind}`, label: `${fmtInt(k.count)} ${k.kind}${k.count === 1 ? '' : 's'}`, sub: 'artifacts · collapsed', href: `${routes.entity(self)}#versions-artifacts`, kind: 'artifact' }));
  const right = [...rightModels, ...rightArtifacts];
  const moreL = ancestors.length - left.length;
  const moreR = descendants.length - rightModels.length;
  const rows = Math.max(1, left.length + (moreL > 0 ? 1 : 0), right.length + (moreR > 0 ? 1 : 0));
  const H = PAD * 2 + rows * ROW;
  const colX = [PAD, W / 2 - BOX_W / 2, W - PAD - BOX_W];
  const yOf = (i: number, n: number) => PAD + ((H - PAD * 2) / Math.max(1, n)) * (i + 0.5) - BOX_H / 2;
  const selfY = H / 2 - BOX_H / 2;
  const p = num(self.attributes?.parameter_count);

  const Box = ({ n, x, y }: { n: Node; x: number; y: number }) => {
    const fill = n.kind === 'this' ? 'var(--accent-soft)' : n.kind === 'artifact' ? 'var(--surface-2)' : 'var(--surface)';
    const stroke = n.kind === 'this' ? 'var(--accent)' : 'var(--rule-strong)';
    const body = (
      <g>
        <rect x={x} y={y} width={BOX_W} height={BOX_H} rx={3} fill={fill} stroke={stroke} strokeDasharray={n.kind === 'artifact' ? '3 2' : undefined} />
        <text x={x + 8} y={y + 12} fontSize={11} fontWeight={n.kind === 'this' ? 600 : 500} fill="var(--ink)">
          {trunc(n.label, 30)}
        </text>
        {n.sub && (
          <text x={x + 8} y={y + 23} fontSize={9.5} fill="var(--ink-3)">
            {trunc(n.sub, 34)}
          </text>
        )}
        <title>{`${n.label}${n.sub ? ` — ${n.sub}` : ''}`}</title>
      </g>
    );
    return n.href && n.kind !== 'this' ? (
      <a href={n.href} className="hover:opacity-80">
        {body}
      </a>
    ) : (
      body
    );
  };
  const edge = (x1: number, y1: number, x2: number, y2: number, dashed = false) => <path d={`M${x1},${y1} C${(x1 + x2) / 2},${y1} ${(x1 + x2) / 2},${y2} ${x2},${y2}`} fill="none" stroke="var(--rule-strong)" strokeWidth={1.2} strokeDasharray={dashed ? '3 3' : undefined} />;

  return (
    <div className={className} data-lineage-tree>
      <svg viewBox={`0 0 ${W} ${H}`} className="block w-full" role="img" aria-label={`Lineage of ${self.name}: ${ancestors.length} ancestors, ${descendants.length} descendants, ${artifactKinds.reduce((n, k) => n + k.count, 0)} artifacts`}>
        <text x={colX[0]} y={PAD - 1} fontSize={9} fill="var(--ink-3)" className="eyebrow">
          {left.length ? `ANCESTORS ${ancestors.length}` : ''}
        </text>
        <text x={W - PAD} y={PAD - 1} fontSize={9} fill="var(--ink-3)" textAnchor="end">
          {right.length ? `DESCENDANTS ${descendants.length}${rightArtifacts.length ? ' · ARTIFACTS' : ''}` : ''}
        </text>
        {left.map((n, i) => (
          <g key={n.id}>
            {edge((colX[0] as number) + BOX_W, yOf(i, rows) + BOX_H / 2, colX[1] as number, selfY + BOX_H / 2)}
            <Box n={n} x={colX[0] as number} y={yOf(i, rows)} />
          </g>
        ))}
        {moreL > 0 && (
          <text x={(colX[0] as number) + 8} y={yOf(left.length, rows) + 16} fontSize={10} fill="var(--ink-3)">
            +{moreL} more ancestors
          </text>
        )}
        {right.map((n, i) => (
          <g key={n.id}>
            {edge((colX[1] as number) + BOX_W, selfY + BOX_H / 2, colX[2] as number, yOf(i, rows) + BOX_H / 2, n.kind === 'artifact')}
            <Box n={n} x={colX[2] as number} y={yOf(i, rows)} />
          </g>
        ))}
        {moreR > 0 && (
          <text x={(colX[2] as number) + 8} y={yOf(right.length, rows) + 16} fontSize={10} fill="var(--ink-3)">
            +{moreR} more descendants
          </text>
        )}
        <Box n={{ id: self.id, label: self.name, sub: p !== null ? `${fmtParams(p)} params · this model` : 'this model', kind: 'this' }} x={colX[1] as number} y={selfY} />
      </svg>
      <ul className="sr-only">
        {ancestors.map((e) => (
          <li key={e.id}>
            ancestor: <Link href={routes.entity(e)}>{e.name}</Link>
          </li>
        ))}
        {descendants.map((e) => (
          <li key={e.id}>
            descendant: <Link href={routes.entity(e)}>{e.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}