'use client';
import { ExternalLink, Focus, GitFork, Maximize2 } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { CompareButton } from '@/components/compare/compare-button';
import { TerminalLayout } from '@/components/layout/terminal';
import { EntityBadge } from '@/components/ui/badges';
import { keyAttributes } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { Sheet } from '@/components/ui/sheet';
import { WatchButton } from '@/components/watchlist/watch-button';
import { cn } from '@/lib/cn';
import { clientGraphExplore } from '@/lib/client-api';
import { fmtInt } from '@/lib/format';
import { predicateLabel, routes, typeLabel } from '@/lib/site';
import type { EntitySummary, ExploreEdge, ExploreNode, GraphExploreMode, GraphExplorePayload, Suggestion } from '@/lib/types';
import { colorOf, GraphCanvas } from './graph-canvas';
import { GRAPH_MODES, graphHref, graphSlugHref } from './modes';
import { NodeSearch } from './node-search';

/*
  Graph workbench (client): TerminalLayout with the mode/depth/type filters in the rail, the canvas in the middle, the
  selected node in the inspector. Mode and depth changes re-fetch `/graph/explore` client-side and mirror the URL with
  `history.replaceState`; a new root navigates (server render, shareable URL). Expansion merges `/graph/explore?depth=1`
  for the clicked node into the current graph. On small screens the inspector opens as a bottom sheet on selection.
*/

type Graph = { nodes: ExploreNode[]; edges: ExploreEdge[]; truncated: boolean; counts: GraphExplorePayload['counts']; predicates: string[] };

function mergeGraph(base: Graph, add: GraphExplorePayload, hasLevel: (id: string) => number | undefined, viaLevel: number): Graph {
  const nodes = [...base.nodes];
  const seen = new Set(nodes.map((n) => n.id));
  for (const n of add.nodes) {
    if (seen.has(n.id)) continue;
    seen.add(n.id);
    nodes.push({ ...n, level: viaLevel + n.level });
  }
  const ek = new Set(base.edges.map((e) => `${e.source}>${e.target}:${e.predicate}`));
  const edges = [...base.edges];
  for (const e of add.edges) {
    const k = `${e.source}>${e.target}:${e.predicate}`;
    if (ek.has(k)) continue;
    ek.add(k);
    edges.push(e);
  }
  void hasLevel;
  return { nodes, edges, truncated: base.truncated || add.truncated, counts: { nodes: nodes.length, edges: edges.length, by_type: countTypes(nodes) }, predicates: [...new Set([...base.predicates, ...add.predicates])] };
}
function countTypes(nodes: ExploreNode[]): Record<string, number> {
  const out: Record<string, number> = {};
  for (const n of nodes) out[n.entity_type] = (out[n.entity_type] ?? 0) + 1;
  return out;
}
function asSummary(n: ExploreNode): EntitySummary {
  return { id: n.id, entity_type: n.entity_type, slug: n.slug, name: n.name, description: null, status: 'active', organization: n.org && n.org_slug ? { id: '', slug: n.org_slug, name: n.org } : null, attributes: n.attributes ?? {}, quality: {}, counts: {}, first_seen_at: '', last_seen_at: '', updated_at: '' };
}

export function GraphWorkbench({ initial, root, mode: initialMode, depth: initialDepth, urlStyle = 'query', embedded = false }: { initial: GraphExplorePayload; root: { slug: string; name: string; entity_type: string }; mode: GraphExploreMode; depth: 1 | 2; /** `query` → /graph?node=…, `path` → /graph/<slug>?… */ urlStyle?: 'query' | 'path'; /** `/graph/[slug]`: shorter chrome, the page renders its own header. */ embedded?: boolean }) {
  const router = useRouter();
  const hrefFor = urlStyle === 'path' ? graphSlugHref : graphHref;
  const [mode, setMode] = useState<GraphExploreMode>(initialMode);
  const [depth, setDepth] = useState<1 | 2>(initialDepth);
  const [graph, setGraph] = useState<Graph>({ nodes: initial.nodes, edges: initial.edges, truncated: initial.truncated, counts: initial.counts, predicates: initial.predicates });
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set([initial.root]));
  const [selected, setSelected] = useState<string | null>(null);
  const [hidden, setHidden] = useState<Set<string>>(new Set());
  const [pending, setPending] = useState<string | null>(null); // node id being expanded, or '*' for a full reload
  const [error, setError] = useState<string | null>(null);
  const [sheet, setSheet] = useState(false);
  const rootId = initial.root;
  const abort = useRef<AbortController | null>(null);

  // reset when the server gives a new initial payload (new root)
  useEffect(() => {
    setGraph({ nodes: initial.nodes, edges: initial.edges, truncated: initial.truncated, counts: initial.counts, predicates: initial.predicates });
    setExpanded(new Set([initial.root]));
    setSelected(null);
    setMode(initialMode);
    setDepth(initialDepth);
  }, [initial, initialMode, initialDepth]);

  const reload = useCallback(
    async (m: GraphExploreMode, d: 1 | 2) => {
      abort.current?.abort();
      const ctl = new AbortController();
      abort.current = ctl;
      setPending('*');
      setError(null);
      try {
        const g = await clientGraphExplore(root.slug, m, d, 150, ctl.signal);
        setGraph({ nodes: g.nodes, edges: g.edges, truncated: g.truncated, counts: g.counts, predicates: g.predicates });
        setExpanded(new Set([g.root]));
        setSelected(null);
        window.history.replaceState(null, '', hrefFor(root.slug, m, d));
      } catch (e) {
        if ((e as Error).name !== 'AbortError') setError('The graph service did not answer for this mode.');
      } finally {
        setPending(null);
      }
    },
    [root.slug, hrefFor],
  );
  const changeMode = (m: GraphExploreMode) => {
    setMode(m);
    void reload(m, depth);
  };
  const changeDepth = (d: 1 | 2) => {
    setDepth(d);
    void reload(mode, d);
  };
  const byId = useMemo(() => new Map(graph.nodes.map((n) => [n.id, n])), [graph.nodes]);
  const expand = useCallback(
    async (id: string) => {
      const n = byId.get(id);
      if (!n || expanded.has(id) || pending) return;
      setPending(id);
      setError(null);
      try {
        const g = await clientGraphExplore(n.slug, mode, 1, 80);
        setGraph((cur) => mergeGraph(cur, g, (x) => byId.get(x)?.level, n.level));
        setExpanded((cur) => new Set([...cur, id]));
      } catch {
        setError(`Could not expand ${n.name}.`);
      } finally {
        setPending(null);
      }
    },
    [byId, expanded, mode, pending],
  );
  const pick = (s: Suggestion) => router.push(hrefFor(s.slug, GRAPH_MODES.find((m) => m.rootTypes.includes(s.entity_type))?.mode ?? mode, depth));
  const select = (id: string | null) => {
    setSelected(id);
    if (id && typeof window !== 'undefined' && window.matchMedia('(max-width: 1023px)').matches) setSheet(true);
  };

  const types = useMemo(() => Object.entries(countTypes(graph.nodes)).sort((a, b) => b[1] - a[1]), [graph.nodes]);
  const predicateCounts = useMemo(() => [...graph.edges.reduce((m, e) => m.set(e.predicate, (m.get(e.predicate) ?? 0) + 1), new Map<string, number>()).entries()].sort((a, b) => b[1] - a[1]), [graph.edges]);
  const shown = graph.nodes.filter((n) => !hidden.has(n.entity_type) || n.id === rootId).length;
  const apiNodes = Number(graph.counts?.nodes ?? graph.nodes.length);
  const current = (selected ? byId.get(selected) : null) ?? byId.get(rootId) ?? null;

  const filters = (
    <div className="space-y-5 text-sm">
      <div>
        <p className="eyebrow mb-1.5">Root</p>
        <NodeSearch onPick={pick} />
        <p className="mt-1.5 flex items-center gap-1.5 text-xs text-ink-3">
          <EntityBadge type={root.entity_type} small /> <span className="truncate text-ink-2">{root.name}</span>
        </p>
      </div>
      <div>
        <p className="eyebrow mb-1.5">Mode</p>
        <ul className="space-y-px" role="radiogroup" aria-label="Graph mode">
          {GRAPH_MODES.map((m) => {
            const on = m.mode === mode;
            return (
              <li key={m.mode}>
                <button type="button" role="radio" aria-checked={on} onClick={() => changeMode(m.mode)} className={cn('flex min-h-9 w-full items-center justify-between gap-2 px-1.5 text-left text-[13px] uppercase tracking-wide', on ? 'bg-ink text-canvas' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')} title={m.hint} data-graph-mode={m.mode}>
                  <span>{m.label}</span>
                </button>
              </li>
            );
          })}
        </ul>
      </div>
      <div>
        <p className="eyebrow mb-1.5">Depth</p>
        <div className="inline-flex border border-rule" role="group" aria-label="Depth">
          {([1, 2] as const).map((d) => (
            <button key={d} type="button" onClick={() => changeDepth(d)} aria-pressed={depth === d} className={cn('inline-flex h-10 items-center px-3 text-sm', d === 2 && 'border-l border-rule', depth === d ? 'bg-ink text-canvas' : 'text-ink-2 hover:text-ink')}>
              {d} hop{d === 2 ? 's' : ''}
            </button>
          ))}
        </div>
      </div>
      <div>
        <p className="eyebrow mb-1.5">Node types</p>
        <ul className="space-y-px">
          {types.map(([t, n]) => {
            const off = hidden.has(t);
            return (
              <li key={t}>
                <button
                  type="button"
                  aria-pressed={!off}
                  onClick={() => setHidden((cur) => {
                    const next = new Set(cur);
                    if (next.has(t)) next.delete(t);
                    else next.add(t);
                    return next;
                  })}
                  className={cn('flex min-h-9 w-full items-center justify-between gap-2 px-1.5 text-sm hover:bg-surface-2', off && 'opacity-50')}
                >
                  <span className="flex items-center gap-2">
                    <span className="inline-block size-2.5 rounded-full" style={{ background: colorOf(t) }} aria-hidden />
                    {typeLabel(t, n !== 1)}
                  </span>
                  <span className="tnum text-xs text-ink-3">{fmtInt(n)}</span>
                </button>
              </li>
            );
          })}
        </ul>
      </div>
      <div>
        <p className="eyebrow mb-1.5">Edge predicates</p>
        <ul className="space-y-0.5 text-xs">
          {predicateCounts.map(([p, n]) => (
            <li key={p} className="flex items-center justify-between gap-2">
              <span className="text-ink-2">{predicateLabel(p, 'out')}</span>
              <span className="tnum text-ink-3">{fmtInt(n)}</span>
            </li>
          ))}
          {predicateCounts.length === 0 && <li className="text-ink-3">No edges in this view.</li>}
        </ul>
        <p className="mt-1.5 text-[11px] text-ink-3">Dashed edges come from tier 3–4 sources.</p>
      </div>
    </div>
  );

  const inspector = current ? (
    <Inspector n={current} rootId={rootId} graph={graph} byId={byId} expanded={expanded} pending={pending} onExpand={expand} onSelect={select} onFocus={(n) => router.push(hrefFor(n.slug, mode, depth))} />
  ) : (
    <p className="text-sm text-ink-3">Select a node to see its facts and links.</p>
  );

  return (
    <TerminalLayout filters={filters} inspector={inspector} filtersTitle="Graph" inspectorTitle="Node" storageKey="aia-graph-inspector" filterCount={hidden.size}>
      <div className="space-y-2" data-graph-workbench>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-3">
          <span className="tnum" data-graph-count>
            {fmtInt(shown)}{shown !== graph.nodes.length ? ` of ${fmtInt(graph.nodes.length)}` : ''} nodes · {fmtInt(graph.edges.length)} edges
          </span>
          {graph.truncated && (
            <span className="text-warning">
              truncated — {fmtInt(apiNodes)} drawn, the neighbourhood is larger <Hint align="right" text="The API stops at the node limit (150) and reports truncated: true. Expand a node or narrow the mode to see the rest." />
            </span>
          )}
          {pending === '*' && <span className="text-accent">Loading…</span>}
          {error && <span className="text-danger">{error}</span>}
          {!embedded && (
            <span className="ml-auto hidden md:inline">
              <Link href={routes.entity(root)} className="link">
                Open {root.name} →
              </Link>
            </span>
          )}
        </div>
        <GraphCanvas nodes={graph.nodes} edges={graph.edges} rootId={rootId} selectedId={selected} onSelect={select} onExpand={expand} expanded={expanded} loadingId={pending && pending !== '*' ? pending : null} hiddenTypes={hidden} tall />
        {/* accessible text fallback */}
        <details className="text-sm">
          <summary className="cursor-pointer py-2 text-xs text-ink-3 hover:text-ink">Every node, as a list ({fmtInt(graph.nodes.length)})</summary>
          <ul className="grid gap-x-6 sm:grid-cols-2 lg:grid-cols-3" data-graph-list>
            {graph.nodes.map((n) => (
              <li key={n.id} className="flex items-center gap-2 border-b border-rule py-1.5">
                <EntityBadge type={n.entity_type} small />
                <Link href={routes.entity(n)} className="truncate text-ink hover:text-accent">
                  {n.name}
                </Link>
                {n.org && <span className="ml-auto shrink-0 text-xs text-ink-3">{n.org}</span>}
              </li>
            ))}
          </ul>
        </details>
      </div>
      <Sheet open={sheet} onClose={() => setSheet(false)} side="bottom" eyebrow="Node" title={current?.name ?? 'Node'}>
        {inspector}
      </Sheet>
    </TerminalLayout>
  );
}

/* -------------------------------------------------------------------------------------------------------- inspector */
function Inspector({ n, rootId, graph, byId, expanded, pending, onExpand, onSelect, onFocus }: { n: ExploreNode; rootId: string; graph: Graph; byId: Map<string, ExploreNode>; expanded: Set<string>; pending: string | null; onExpand: (id: string) => void; onSelect: (id: string) => void; onFocus: (n: ExploreNode) => void }) {
  const summary = asSummary(n);
  const attrs = keyAttributes(summary);
  const groups = new Map<string, { node: ExploreNode; dir: 'out' | 'in' }[]>();
  for (const e of graph.edges) {
    if (e.source !== n.id && e.target !== n.id) continue;
    const out = e.source === n.id;
    const other = byId.get(out ? e.target : e.source);
    if (!other) continue;
    const key = `${e.predicate}|${out ? 'out' : 'in'}`;
    (groups.get(key) ?? groups.set(key, []).get(key)!).push({ node: other, dir: out ? 'out' : 'in' });
  }
  const degree = [...groups.values()].reduce((s, g) => s + g.length, 0);
  const isRoot = n.id === rootId;
  const canExpand = !isRoot && !expanded.has(n.id);
  return (
    <div className="space-y-4 text-sm" data-graph-inspector>
      <div>
        <div className="flex flex-wrap items-center gap-1.5">
          <EntityBadge type={n.entity_type} small />
          {n.artifact_kind && <span className="text-[11px] uppercase tracking-wide text-ink-3">{n.artifact_kind}</span>}
          {isRoot ? <span className="text-[11px] uppercase tracking-wide text-ink-3">root</span> : <span className="tnum text-[11px] text-ink-3">{n.level} hop{n.level === 1 ? '' : 's'} from root</span>}
        </div>
        <p className="mt-1 text-base font-semibold leading-tight text-ink">{n.name}</p>
        {n.org && n.org_slug && (
          <Link href={routes.entity({ entity_type: 'company', slug: n.org_slug })} className="text-xs text-ink-2 hover:text-accent">
            {n.org}
          </Link>
        )}
      </div>
      {attrs.length > 0 && (
        <dl className="kv [&>div]:py-1">
          {attrs.map((a) => (
            <div key={a.label}>
              <dt className="capitalize">{a.label}</dt>
              <dd className="tnum text-ink">{a.value}</dd>
            </div>
          ))}
        </dl>
      )}
      <div className="flex flex-wrap gap-1.5">
        <Link href={routes.entity(n)} 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">
          <ExternalLink className="size-3.5" aria-hidden /> Open page
        </Link>
        <button type="button" onClick={() => onExpand(n.id)} disabled={!canExpand || !!pending} 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 disabled:opacity-40" data-graph-expand>
          <Maximize2 className="size-3.5" aria-hidden /> {expanded.has(n.id) ? 'Expanded' : pending === n.id ? 'Expanding…' : 'Expand'}
        </button>
        {!isRoot && (
          <button type="button" onClick={() => onFocus(n)} 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">
            <Focus className="size-3.5" aria-hidden /> Make root
          </button>
        )}
        <CompareButton e={summary} size="sm" />
        <WatchButton e={summary} size="sm" />
      </div>
      <div>
        <p className="eyebrow mb-1.5">
          Links in view <span className="tnum normal-case tracking-normal text-ink-3">{fmtInt(degree)}</span>
        </p>
        {groups.size === 0 ? (
          <p className="text-xs text-ink-3">No edges to this node in the current view{canExpand ? ' — expand it to load its neighbourhood' : ''}.</p>
        ) : (
          <dl className="kv [&>div]:py-1">
            {[...groups.entries()].map(([key, items]) => {
              const [pred, dir] = key.split('|') as [string, 'out' | 'in'];
              return (
                <div key={key}>
                  <dt>
                    {predicateLabel(pred, dir)} <span className="tnum text-ink-3">{items.length}</span>
                  </dt>
                  <dd className="flex flex-wrap gap-x-2 gap-y-0.5">
                    {items.slice(0, 12).map(({ node }) => (
                      <button key={node.id} type="button" onClick={() => onSelect(node.id)} className="inline-flex items-center gap-1 text-left text-ink hover:text-accent">
                        <span className="inline-block size-2 rounded-full" style={{ background: colorOf(node.entity_type) }} aria-hidden />
                        <span className="truncate">{node.name}</span>
                      </button>
                    ))}
                    {items.length > 12 && <span className="text-xs text-ink-3">+{items.length - 12}</span>}
                  </dd>
                </div>
              );
            })}
          </dl>
        )}
      </div>
      <p className="flex items-center gap-1 text-[11px] text-ink-3">
        <GitFork className="size-3" aria-hidden /> Edges are stated relations only (developer, provider, benchmark, paper…) — nothing is inferred.
      </p>
    </div>
  );
}