'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ChevronRight, Loader2 } from 'lucide-react';
import type { TreeNode } from '@/lib/queries/taxonomy';

/** Lazily expandable hierarchy tree. Children are fetched on first expand from /api/taxonomy/children. */
export function Tree({ roots, hierarchyType }: { roots: TreeNode[]; hierarchyType: string }) {
  return (
    <ul role="tree" className="text-[13.5px]">
      {roots.map((n) => (
        <Node key={n.id} node={n} hierarchyType={hierarchyType} depth={0} />
      ))}
    </ul>
  );
}

function Node({ node, hierarchyType, depth }: { node: TreeNode; hierarchyType: string; depth: number }) {
  const [open, setOpen] = useState(false);
  const [children, setChildren] = useState<TreeNode[] | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const toggle = async () => {
    const next = !open;
    setOpen(next);
    if (next && children == null && node.child_count > 0) {
      setLoading(true);
      setError(null);
      try {
        const r = await fetch(`/api/taxonomy/children?id=${encodeURIComponent(node.id)}&type=${encodeURIComponent(hierarchyType)}`);
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        const j = (await r.json()) as { data: TreeNode[] };
        setChildren(j.data);
      } catch (e) {
        setError((e as Error).message);
      } finally {
        setLoading(false);
      }
    }
  };

  return (
    <li role="treeitem" aria-expanded={node.child_count > 0 ? open : undefined} aria-level={depth + 1}>
      <div className="flex items-center gap-1 border-b border-rule py-1" style={{ paddingLeft: depth * 18 }}>
        {node.child_count > 0 ? (
          <button type="button" onClick={toggle} aria-label={open ? `Collapse ${node.canonical_name}` : `Expand ${node.canonical_name} (${node.child_count} children)`} className="inline-flex h-5 w-5 shrink-0 items-center justify-center text-ink-3 hover:text-accent">
            {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden /> : <ChevronRight className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-90' : ''}`} aria-hidden />}
          </button>
        ) : (
          <span className="inline-block h-5 w-5 shrink-0" aria-hidden />
        )}
        <Link href={`/cancer/${node.slug}`} className={`ci-link truncate ${node.malignant ? '' : 'text-ink-3'}`}>
          {node.canonical_name}
        </Link>
        {node.primary_oncotree_code && hierarchyType === 'oncotree' ? <span className="ci-mono shrink-0 text-[10.5px] text-ink-4">{node.primary_oncotree_code}</span> : null}
        {node.primary_ncit_code && hierarchyType === 'ncit' ? <span className="ci-mono shrink-0 text-[10.5px] text-ink-4">{node.primary_ncit_code}</span> : null}
        {node.child_count > 0 ? <span className="ci-num ml-auto shrink-0 text-[11px] text-ink-3">{node.child_count}</span> : null}
      </div>
      {open && error ? (
        <p className="py-1 text-[12px] text-danger" style={{ paddingLeft: depth * 18 + 24 }}>
          Could not load children ({error}).
        </p>
      ) : null}
      {open && children ? (
        <ul role="group">
          {children.map((c) => (
            <Node key={c.id} node={c} hierarchyType={hierarchyType} depth={depth + 1} />
          ))}
        </ul>
      ) : null}
    </li>
  );
}