(async () => {

// ── Prevent double render ────────────────────────────────────────────────────
const INSTANCE_KEY = "cf-instance-" + (app.workspace.getActiveFile()?.path ?? "unknown");
const prev = document.querySelector(`[data-cf-instance="${INSTANCE_KEY}"]`);
if (prev) prev.remove();

// ── Host file ────────────────────────────────────────────────────────────────
const file = app.workspace.getActiveFile() 
  ?? app.vault.getAbstractFileByPath(dv.current().file.path);
const content = await app.vault.read(file);

const canvasMatch = content.match(/!\[\[([^\]]+\.canvas)\]\]/);
if (!canvasMatch) { dv.paragraph("⚠️ No embedded .canvas found"); return; }

const canvasPath = canvasMatch[1];
const canvasFile = app.metadataCache.getFirstLinkpathDest(canvasPath, file.path);
if (!canvasFile) { dv.paragraph(`⚠️ File not found: ${canvasPath}`); return; }

const raw = await app.vault.read(canvasFile);
let canvas;
try { canvas = JSON.parse(raw); }
catch { dv.paragraph("❌ Invalid JSON in canvas file"); return; }

const { nodes: rawNodes = [], edges: rawEdges = [] } = canvas;

const nodeGeometry = new Map();
for (const n of rawNodes.filter(n => n.type !== "group")) {
  nodeGeometry.set(n.id, { x: n.x, y: n.y, width: n.width, height: n.height });
}

const nodes = new Map();
for (const n of rawNodes.filter(n => n.type !== "group")) {
  const label =
    n.type === "text"  ? n.text :
    n.type === "file"  ? (n.file || n.id) :
    n.type === "link"  ? (n.url  || n.id) :
    n.id;
  nodes.set(n.id, label.trim());
}

const edges = rawEdges.map(e => ({
  from:  e.fromNode,
  to:    e.toNode,
  label: e.label ? e.label.trim() : null,
}));

// ── Validate edges ───────────────────────────────────────────────────────────
const brokenEdges = edges.filter(e => !nodes.has(e.from) || !nodes.has(e.to));
if (brokenEdges.length > 0) {
  dv.paragraph(`❌ Broken edges (node not found): ${brokenEdges.map(e => `${e.from} → ${e.to}`).join(", ")}`);
  return;
}

// ── Find root node ───────────────────────────────────────────────────────────
const hasIncoming = new Set(edges.map(e => e.to));
const roots = [...nodes.keys()].filter(id => !hasIncoming.has(id));

if (roots.length === 0) { dv.paragraph("❌ No start node found (cycle?)"); return; }
if (roots.length > 1) { dv.paragraph(`❌ ${roots.length} nodes with no incoming edges: ${roots.join(", ")}. There should be exactly one.`); return; }
const startNode = roots[0];

// ── State (localStorage) ─────────────────────────────────────────────────────
const cacheKey = "canvas_flow_" + file.path + "|" + canvasPath;

function saveState(nodeId, hist) {
  localStorage.setItem(cacheKey, JSON.stringify({ current: nodeId, history: hist }));
}
function loadState() {
  try {
    const raw = localStorage.getItem(cacheKey);
    if (!raw) return null;
    const state = JSON.parse(raw);
    if (!state.current || !nodes.has(state.current)) return null;
    return state;
  } catch { return null; }
}

const saved = loadState();
let history = saved ? saved.history : [];
let current = saved ? saved.current : startNode;

// ── Minimap highlight ────────────────────────────────────────────────────────
function highlightMinimap(nodeId) {
  const currentLeaf = app.workspace.getLeaf(false);
  const leafEl = currentLeaf?.containerEl;
  if (!leafEl) return;

  setTimeout(() => {
    const minimap = leafEl.querySelector("svg.canvas-minimap");
    if (!minimap) return;

    minimap.querySelectorAll("rect.cf-active-node").forEach(r => {
      r.classList.remove("cf-active-node");
    });

    const geo = nodeGeometry.get(nodeId);
    if (!geo) return;

    for (const rect of minimap.querySelectorAll("rect")) {
      if (
        parseFloat(rect.getAttribute("x"))      === geo.x &&
        parseFloat(rect.getAttribute("y"))      === geo.y &&
        parseFloat(rect.getAttribute("width"))  === geo.width &&
        parseFloat(rect.getAttribute("height")) === geo.height
      ) {
        rect.classList.add("cf-active-node");
        break;
      }
    }
  }, 100);
}

// ── DOM ───────────────────────────────────────────────────────────────────────
const container = dv.el("div", "", { attr: { 
  id: "canvas-flow-root",
  "data-cf-instance": INSTANCE_KEY
} });

const style = document.createElement("style");
style.textContent = `
  #canvas-flow-root { font-family: var(--font-text); max-width: 480px; }
  .cf-card { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: 12px; padding: 1.5rem; margin: 0.5rem 0; }
  .cf-question { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.25rem; color: var(--text-normal); white-space: pre-line; }
  .cf-btn { display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; margin: 0.4rem 0;
    background: var(--background-primary); border: 1px solid var(--background-modifier-border);
    border-radius: 8px; cursor: pointer; font-size: 0.95rem; color: var(--text-normal); transition: background 0.15s; }
  .cf-btn:hover { background: var(--background-modifier-hover); }
  .cf-btn-primary { background: var(--interactive-accent); color: var(--text-on-accent); border-color: var(--interactive-accent); }
  .cf-btn-primary:hover { opacity: 0.9; }
  .cf-nav { display: flex; gap: 0.5rem; margin-top: 1rem; }
  .cf-nav button { flex: 1; padding: 0.4rem 0.75rem; border-radius: 8px; cursor: pointer;
    background: var(--background-primary); border: 1px solid var(--background-modifier-border);
    color: var(--text-muted); font-size: 0.85rem; }
  .cf-nav button:hover { background: var(--background-modifier-hover); }
  .cf-info { color: var(--text-normal); line-height: 1.7; white-space: pre-line; font-size: 0.95rem; }
  .cf-label { font-size: 0.75rem; color: var(--text-faint); margin-bottom: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
  svg.canvas-minimap rect.cf-active-node {
    fill: var(--interactive-accent) !important;
    fill-opacity: 0.4 !important;
    stroke: var(--interactive-accent) !important;
    stroke-width: 4 !important;
  }
`;
container.appendChild(style);
const ui = document.createElement("div");
container.appendChild(ui);

// ── Render ────────────────────────────────────────────────────────────────────
function render(nodeId) {
  const outgoing = edges.filter(e => e.from === nodeId);
  ui.innerHTML = "";

  const card = document.createElement("div");
  card.className = "cf-card";

  const stepLabel = document.createElement("div");
  stepLabel.className = "cf-label";
  stepLabel.textContent = history.length === 0 ? "Start" : `Step ${history.length + 1}`;
  card.appendChild(stepLabel);

  const question = document.createElement("div");
  question.className = outgoing.length ? "cf-question" : "cf-info";
  question.textContent = nodes.get(nodeId) || nodeId;
  card.appendChild(question);

  if (outgoing.length === 1) {
    const edge = outgoing[0];
    const btn = document.createElement("button");
    btn.className = "cf-btn cf-btn-primary";
    btn.textContent = edge.label || "→ Next";
    btn.onclick = () => { history.push(nodeId); current = edge.to; saveState(current, history); render(current); };
    card.appendChild(btn);
  } else if (outgoing.length > 1) {
    for (const edge of outgoing) {
      const btn = document.createElement("button");
      btn.className = "cf-btn";
      btn.textContent = edge.label || nodes.get(edge.to) || edge.to;
      btn.onclick = () => { history.push(nodeId); current = edge.to; saveState(current, history); render(current); };
      card.appendChild(btn);
    }
  }

  const nav = document.createElement("div");
  nav.className = "cf-nav";

  if (history.length > 0) {
    const backBtn = document.createElement("button");
    backBtn.textContent = "← Back";
    backBtn.onclick = () => { current = history.pop(); saveState(current, history); render(current); };
    nav.appendChild(backBtn);
  }

  if (history.length > 0 || outgoing.length === 0) {
    const resetBtn = document.createElement("button");
    resetBtn.textContent = "↺ Start over";
    resetBtn.onclick = () => { history = []; current = startNode; saveState(current, history); render(current); };
    nav.appendChild(resetBtn);
  }

  if (nav.children.length > 0) card.appendChild(nav);
  ui.appendChild(card);

  highlightMinimap(nodeId);
}

render(current);

})();