// graph.js — Progressive dependency graph visualization
// Uses dagre (layout) + panzoom (pan/zoom) from CDN
// Appended to index.html as separate script — reads globals: allInstances, rawDetail, getToken, getDeckEnv
(function () {
  "use strict";

  // ── Constants ────────────────────────────────────────────────────────────
  var NODE_W = 160;
  var NODE_H = 52;
  var REALM_W = 180;
  var REALM_H = 44;
  var RANK_SEP = 90;
  var NODE_SEP = 36;

  // Color palette per svc keyword (substring match, case-insensitive)
  var SVC_COLORS = [
    ["s3",          "#1d4e6e", "#38bdf8"],
    ["postgresql",  "#1a3d2b", "#4ade80"],
    ["postgres",    "#1a3d2b", "#4ade80"],
    ["redis",       "#4a1c1c", "#f87171"],
    ["kubernetes",  "#1a2e4a", "#60a5fa"],
    ["штурвал",     "#1a2e4a", "#60a5fa"],
    ["rabbitmq",    "#3b2000", "#fb923c"],
    ["nodejs",      "#1a3b20", "#86efac"],
    ["flask",       "#1a3b20", "#86efac"],
    ["lucee",       "#2d1b4a", "#c084fc"],
    ["mongodb",     "#1a3a1a", "#4ade80"],
    ["grafana",     "#2d1000", "#fdba74"],
    ["pgadmin",     "#1a3d2b", "#6ee7b7"],
    ["edge",        "#1e293b", "#94a3b8"],
    ["vdc",         "#1e293b", "#94a3b8"],
    ["vapp",        "#1e293b", "#94a3b8"],
    ["cloud direct","#0c2340", "#93c5fd"],
    ["dns",         "#1a2040", "#818cf8"],
    ["ip",          "#1e293b", "#cbd5e1"],
    ["http",        "#1a2e1a", "#bbf7d0"],
    ["nodered",     "#3b1500", "#fdba74"]
  ];

  // Edge color by source svc keyword
  var EDGE_COLORS = [
    ["s3",         "#38bdf8"],
    ["postgresql", "#4ade80"],
    ["postgres",   "#4ade80"],
    ["redis",      "#f87171"],
    ["kubernetes", "#60a5fa"],
    ["штурвал",    "#60a5fa"],
    ["rabbitmq",   "#fb923c"],
    ["nodejs",     "#86efac"],
    ["flask",      "#86efac"],
    ["lucee",      "#c084fc"],
    ["dns",        "#818cf8"],
    ["edge",       "#94a3b8"]
  ];

  function svcStyle(svcStr) {
    var s = (svcStr || "").toLowerCase();
    for (var i = 0; i < SVC_COLORS.length; i++) {
      if (s.indexOf(SVC_COLORS[i][0]) >= 0) {
        return { bg: SVC_COLORS[i][1], border: SVC_COLORS[i][2] };
      }
    }
    return { bg: "#1e293b", border: "#475569" };
  }

  function edgeColor(svcStr) {
    var s = (svcStr || "").toLowerCase();
    for (var i = 0; i < EDGE_COLORS.length; i++) {
      if (s.indexOf(EDGE_COLORS[i][0]) >= 0) return EDGE_COLORS[i][1];
    }
    return "#475569";
  }

  // ── State ────────────────────────────────────────────────────────────────
  var graphCache = null;   // built SVG string, null = not built yet
  var building   = false;  // loading in progress flag

  // ── DOM helpers ──────────────────────────────────────────────────────────
  function getOverlay() { return document.getElementById("graph-overlay"); }
  function getCanvas()  { return document.getElementById("graph-canvas"); }
  function getStatus()  { return document.getElementById("graph-status"); }

  // ── Open / Close ─────────────────────────────────────────────────────────
  function openGraph() {
    var overlay = getOverlay();
    if (!overlay) { console.error("[graph] #graph-overlay not found"); return; }
    overlay.style.display = "flex";
    if (graphCache) {
      showCached();
    } else if (!building) {
      buildGraph();
    }
  }

  function closeGraph() {
    var overlay = getOverlay();
    if (overlay) overlay.style.display = "none";
  }

  function refreshGraph() {
    graphCache = null;
    building = false;
    var canvas = getCanvas();
    if (canvas) canvas.innerHTML = "";
    buildGraph();
  }

  function showCached() {
    var canvas = getCanvas();
    if (!canvas) return;
    canvas.innerHTML = graphCache;
    attachPanzoom();
    setStatus("");
  }

  function setStatus(msg) {
    var el = getStatus();
    if (el) el.textContent = msg;
  }

  // ── Layout helpers ───────────────────────────────────────────────────────

  // Simple dagre-based layout using the global dagre object from CDN
  function layoutGraph(nodes, edges) {
    var g = new dagre.graphlib.Graph();
    g.setGraph({ rankdir: "TB", ranksep: RANK_SEP, nodesep: NODE_SEP, marginx: 40, marginy: 40 });
    g.setDefaultEdgeLabel(function () { return {}; });

    nodes.forEach(function (n) {
      g.setNode(n.id, { width: n.w || NODE_W, height: n.h || NODE_H, label: n.id });
    });
    edges.forEach(function (e) {
      if (g.hasNode(e.from) && g.hasNode(e.to)) g.setEdge(e.from, e.to);
    });

    dagre.layout(g);
    return g;
  }

  // ── SVG rendering ────────────────────────────────────────────────────────

  function escX(v) {
    return String(v == null ? "" : v)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  function truncate(str, maxLen) {
    if (!str) return "";
    return str.length > maxLen ? str.slice(0, maxLen - 1) + "…" : str;
  }

  function renderArrowMarker(color, id) {
    return '<marker id="' + escX(id) + '" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">' +
      '<path d="M0,0 L0,6 L8,3 z" fill="' + escX(color) + '"/>' +
      '</marker>';
  }

  function pointsOnEdge(g, fromId, toId) {
    var edge = g.edge(fromId, toId);
    if (!edge || !edge.points || edge.points.length < 2) {
      // fallback: straight line between node centers
      var nf = g.node(fromId), nt = g.node(toId);
      if (!nf || !nt) return null;
      return [{ x: nf.x, y: nf.y + (nf.height || NODE_H) / 2 },
              { x: nt.x, y: nt.y - (nt.height || NODE_H) / 2 }];
    }
    return edge.points;
  }

  function polyline(pts) {
    return pts.map(function (p) { return p.x + "," + p.y; }).join(" ");
  }

  function renderSVG(g, nodesMeta) {
    var gw = g.graph().width  || 800;
    var gh = g.graph().height || 600;
    var svgW = gw + 80;
    var svgH = gh + 80;

    // Collect unique edge colors for markers
    var markerColors = {};
    nodesMeta.edges.forEach(function (e) {
      var c = e.color || "#475569";
      markerColors[c] = true;
    });

    var defs = '<defs>';
    Object.keys(markerColors).forEach(function (c) {
      var mid = "arr-" + c.replace(/[^a-zA-Z0-9]/g, "");
      defs += renderArrowMarker(c, mid);
    });
    defs += '</defs>';

    var svgParts = [
      '<svg id="graph-svg" xmlns="http://www.w3.org/2000/svg"',
      '  width="' + svgW + '" height="' + svgH + '"',
      '  viewBox="0 0 ' + svgW + ' ' + svgH + '">',
      defs
    ];

    // Draw edges first (under nodes)
    nodesMeta.edges.forEach(function (e) {
      var pts = pointsOnEdge(g, e.from, e.to);
      if (!pts) return;
      var c = e.color || "#475569";
      var mid = "arr-" + c.replace(/[^a-zA-Z0-9]/g, "");
      svgParts.push(
        '<polyline points="' + polyline(pts) + '"' +
        ' fill="none" stroke="' + escX(c) + '" stroke-width="1.5" opacity="0.75"' +
        ' marker-end="url(#' + mid + ')"/>'
      );
    });

    // Draw nodes
    g.nodes().forEach(function (id) {
      var pos = g.node(id);
      if (!pos) return;
      var meta = nodesMeta.map[id];
      if (!meta) return;
      var x = pos.x - pos.width / 2;
      var y = pos.y - pos.height / 2;
      var w = pos.width;
      var h = pos.height;

      if (meta.type === "realm") {
        // Platform node — dashed border, distinct style
        svgParts.push(
          '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '"' +
          ' rx="6" fill="#0f172a" stroke="#64748b" stroke-width="1.5" stroke-dasharray="5,3"/>'
        );
        svgParts.push(
          '<text x="' + (x + w / 2) + '" y="' + (y + h / 2 - 6) + '"' +
          ' text-anchor="middle" font-family="sans-serif" font-size="10" font-weight="600"' +
          ' fill="#94a3b8">ПЛАТФОРМА</text>'
        );
        svgParts.push(
          '<text x="' + (x + w / 2) + '" y="' + (y + h / 2 + 10) + '"' +
          ' text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700"' +
          ' fill="#e2e8f0">' + escX(truncate(meta.label, 22)) + '</text>'
        );
      } else {
        // Instance node
        var st = svcStyle(meta.svc);
        svgParts.push(
          '<rect x="' + x + '" y="' + y + '" width="' + w + '" height="' + h + '"' +
          ' rx="6" fill="' + escX(st.bg) + '" stroke="' + escX(st.border) + '" stroke-width="1.5"/>'
        );
        // Status dot
        var dotColor = meta.statusColor || "#6e7681";
        svgParts.push(
          '<circle cx="' + (x + 12) + '" cy="' + (y + h / 2) + '" r="4" fill="' + escX(dotColor) + '"/>'
        );
        // Name
        svgParts.push(
          '<text x="' + (x + 24) + '" y="' + (y + h / 2 - 5) + '"' +
          ' font-family="sans-serif" font-size="12" font-weight="600"' +
          ' fill="#f1f5f9">' + escX(truncate(meta.label, 18)) + '</text>'
        );
        // Svc
        svgParts.push(
          '<text x="' + (x + 24) + '" y="' + (y + h / 2 + 11) + '"' +
          ' font-family="sans-serif" font-size="10"' +
          ' fill="' + escX(st.border) + '">' + escX(truncate(meta.svc, 22)) + '</text>'
        );
      }
    });

    svgParts.push('</svg>');
    return svgParts.join("\n");
  }

  // ── Status color helper ──────────────────────────────────────────────────
  function statusDotColor(status) {
    var m = {
      running:       "#56d364",
      suspended:     "#e3b341",
      deleted:       "#f85149",
      deleting:      "#f85149",
      pending:       "#58a6ff",
      creating:      "#58a6ff",
      "not created": "#6e7681"
    };
    return m[(status || "").toLowerCase()] || "#6e7681";
  }

  // ── Main build pipeline ──────────────────────────────────────────────────
  function buildGraph() {
    if (building) return;
    building = true;
    graphCache = null;

    var canvas = getCanvas();
    if (!canvas) return;
    canvas.innerHTML = "";
    setStatus("Строю схему: загрузка инстансов…");

    // Step 1: Use allInstances exposed from IIFE via window._getInstances()
    var instances = (typeof window._getInstances === "function") ? window._getInstances() : [];
    if (!instances || !instances.length) {
      setStatus("Нет данных. Нажмите «Обновить» в таблице, затем откройте схему снова.");
      building = false;
      return;
    }

    // Step 2: Collect unique realms
    var realmSet = {};
    instances.forEach(function (inst) {
      var r = inst.resourceRealm;
      if (r) realmSet[r] = true;
    });

    // Build node list: realm nodes + instance nodes
    var nodes = [];
    var nodesMeta = { map: {}, edges: [] };

    Object.keys(realmSet).forEach(function (r) {
      var id = "realm:" + r;
      nodes.push({ id: id, w: REALM_W, h: REALM_H });
      nodesMeta.map[id] = { type: "realm", label: r };
    });

    instances.forEach(function (inst) {
      var id = inst.instanceUid;
      if (!id) return;
      nodes.push({ id: id, w: NODE_W, h: NODE_H });
      nodesMeta.map[id] = {
        type:        "instance",
        label:       inst.displayName || id,
        svc:         inst.svc || "",
        statusColor: statusDotColor(inst.explainedStatus)
      };
    });

    // Step 3: Realm → instance edges (data already available)
    instances.forEach(function (inst) {
      var r = inst.resourceRealm;
      if (r && inst.instanceUid) {
        nodesMeta.edges.push({
          from:  "realm:" + r,
          to:    inst.instanceUid,
          color: "#334155"
        });
      }
    });

    // Step 4: Draw nodes + realm edges immediately
    setStatus("Строю схему: расстановка узлов…");
    var g = layoutGraph(nodes, nodesMeta.edges);
    var partialSvg = renderSVG(g, nodesMeta);
    canvas.innerHTML = partialSvg;
    attachPanzoom();

    // Step 5: Load dependencies for each instance one by one
    var uidList = instances.map(function (i) { return i.instanceUid; }).filter(Boolean);
    var total = uidList.length;
    var done = 0;

    function loadNext(idx) {
      if (idx >= uidList.length) {
        // All done — re-render with all edges
        setStatus("Строю финальную схему…");
        var gFinal = layoutGraph(nodes, nodesMeta.edges);
        var finalSvg = renderSVG(gFinal, nodesMeta);
        canvas.innerHTML = finalSvg;
        attachPanzoom();
        graphCache = canvas.innerHTML;
        building = false;
        setStatus("");
        return;
      }

      var uid = uidList[idx];

      fetch("/dashboard/api/instances/" + uid, {
        headers: {
          "X-Deck-Token": localStorage.getItem("deck_token") || "",
          "X-Deck-Env":   localStorage.getItem("deck_env")   || "test"
        }
      })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (data) {
        done++;
        setStatus("Загружаю зависимости: " + done + " / " + total);

        if (data) {
          var inst = data.instance || data;
          var deps = inst.dependencies || inst.deps || [];
          var depInstances = inst.dependentInstances || inst.dependsOn || [];

          deps.forEach(function (dep) {
            var toUid = dep.uid || dep.instanceUid || dep.dependencyUid;
            if (toUid && nodesMeta.map[toUid]) {
              var c = edgeColor(dep.svc || "");
              nodesMeta.edges.push({ from: uid, to: toUid, color: c });
            }
          });

          depInstances.forEach(function (dep) {
            var fromUid = dep.uid || dep.instanceUid || dep.dependencyUid;
            if (fromUid && nodesMeta.map[fromUid]) {
              var c = edgeColor(dep.svc || "");
              nodesMeta.edges.push({ from: fromUid, to: uid, color: c });
            }
          });

          // Re-render SVG incrementally every 10 instances
          if (done % 10 === 0) {
            var gNow = layoutGraph(nodes, nodesMeta.edges);
            canvas.innerHTML = renderSVG(gNow, nodesMeta);
            attachPanzoom();
          }
        }

        // Small delay to avoid hammering the API
        setTimeout(function () { loadNext(idx + 1); }, 30);
      })
      .catch(function () {
        done++;
        setTimeout(function () { loadNext(idx + 1); }, 30);
      });
    }

    loadNext(0);
  }

  // ── Panzoom attachment ───────────────────────────────────────────────────
  function attachPanzoom() {
    var svg = document.getElementById("graph-svg");
    if (!svg || typeof panzoom === "undefined") return;
    // Destroy previous instance if any
    if (svg._panzoom) {
      try { svg._panzoom.dispose(); } catch (e) {}
    }
    svg._panzoom = panzoom(svg, {
      maxZoom: 4,
      minZoom: 0.1,
      smoothScroll: false
    });
  }

  // ── Wire up after DOM ready ──────────────────────────────────────────────
  function init() {
    var btnOpen    = document.getElementById("btn-graph-open");
    var btnClose   = document.getElementById("btn-graph-close");
    var btnRefresh = document.getElementById("btn-graph-refresh");
    var overlay    = document.getElementById("graph-overlay");

    if (btnOpen)    btnOpen.addEventListener("click", openGraph);
    if (btnClose)   btnClose.addEventListener("click", closeGraph);
    if (btnRefresh) btnRefresh.addEventListener("click", refreshGraph);
    if (overlay)    overlay.addEventListener("click", function (e) {
      if (e.target === overlay) closeGraph();
    });

    // Keyboard Escape
    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape") closeGraph();
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

  // Expose for manual testing
  window.graphModule = { open: openGraph, close: closeGraph, refresh: refreshGraph };

})();