// The Constellation (spec §17.2): projects as prisms on a ring, agents in

// orbit, the owner at the centre, and every event from the stream drawn as

// light. Plain SVG and script, no library; the page's still picture stands

// in when this does not run.

(function () {

  "use strict";

  var svg = document.getElementById("sky");

  var dataEl = document.getElementById("sky-data");

  if (!svg || !dataEl || !window.requestAnimationFrame) return;

  var NS = "http://www.w3.org/2000/svg";

  var CX = 450, CY = 320, RING = 205, ORBIT = 54, PRISM = 24;

  var HUES = [0, 30, 55, 120, 190, 230, 275, 320];

  var PRESENCE = { online: "#3fb950", busy: "#a371f7", idle: "#d29922", paused: "#d29922", blocked: "#f0883e", offline: "#6e7681" };

  var calm = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  var data = JSON.parse(dataEl.textContent);

  var start = performance.now();

  var prisms = {}, agents = {}, layer = {};

  function el(name, attrs, parent) {

    var e = document.createElementNS(NS, name);

    for (var k in attrs) e.setAttribute(k, attrs[k]);

    if (parent) parent.appendChild(e);

    return e;

  }

  function text(parent, cls, s) { var t = el("text", { "class": cls }, parent); t.textContent = s; return t; }

  // A sky that does not change between redraws.

  var seed = 7;

  function rand() { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }

  function build() {

    var defs = svg.querySelector("defs");

    while (svg.firstChild) svg.removeChild(svg.firstChild);

    if (defs) svg.appendChild(defs);

    prisms = {}; agents = {};

    seed = 7;

    layer.stars = el("g", {}, svg);

    for (var s = 0; s < 90; s++) {

      var st = el("circle", { "class": "star", cx: (rand() * 900).toFixed(1), cy: (rand() * 640).toFixed(1), r: (rand() * 1.2 + 0.2).toFixed(2) }, layer.stars);

      st.setAttribute("opacity", (rand() * 0.6 + 0.15).toFixed(2));

      st.twinkle = rand() * 6.28;

    }

    layer.lines = el("g", {}, svg);

    layer.beams = el("g", {}, svg);

    layer.nodes = el("g", {}, svg);

    var ps = data.projects || [];

    var n = Math.max(ps.length, 1);

    ps.forEach(function (p, i) {

      var a = -Math.PI / 2 + 2 * Math.PI * i / n;

      var x = CX + RING * Math.cos(a), y = CY + RING * Math.sin(a), hue = HUES[i % HUES.length];

      prisms[p.name] = { x: x, y: y, hue: hue };

      el("line", { "class": "spoke", x1: CX, y1: CY, x2: x.toFixed(1), y2: y.toFixed(1) }, layer.lines);

      el("circle", { "class": "orbit", cx: x.toFixed(1), cy: y.toFixed(1), r: ORBIT }, layer.nodes);

      var g = el("g", {}, layer.nodes);

      prisms[p.name].g = g;

      el("polygon", {

        "class": "prism", fill: "hsl(" + hue + ",80%,60%)",

        points: [0, -PRISM, PRISM * 0.87, PRISM * 0.5, -PRISM * 0.87, PRISM * 0.5].join(" ")

      }, g);

      var label = text(layer.nodes, "plabel", p.name);

      label.setAttribute("x", x.toFixed(1)); label.setAttribute("y", (y + ORBIT + 22).toFixed(1));

      (p.agents || []).forEach(function (ag, j, all) {

        var node = el("circle", { "class": "agent", r: 7, fill: PRESENCE[ag.presence] || PRESENCE.offline }, layer.nodes);

        var t = text(layer.nodes, "alabel", ag.name);

        var title = el("title", {}, node); title.textContent = ag.name + " · " + ag.kind + " · " + ag.presence;

        agents[ag.name] = { project: p.name, phase: 2 * Math.PI * j / Math.max(all.length, 1), node: node, label: t, presence: ag.presence };

      });

    });

    ps.forEach(function (p) {

      var a = prisms[p.name];

      (p.depends_on || []).forEach(function (q) {

        var b = prisms[q];

        if (a && b) el("path", { "class": "link", d: "M" + a.x.toFixed(1) + "," + a.y.toFixed(1) + " Q" + CX + "," + CY + " " + b.x.toFixed(1) + "," + b.y.toFixed(1) }, layer.lines);

      });

    });

    el("circle", { "class": "core", cx: CX, cy: CY, r: 22 }, layer.nodes);

    var o = text(layer.nodes, "olabel", data.owner || "you");

    o.setAttribute("x", CX); o.setAttribute("y", CY + 44);

  }

  function agentAt(name, t) {

    var a = agents[name];

    if (!a) return null;

    var p = prisms[a.project];

    // Busy agents move faster; offline ones stand still.

    var speed = a.presence === "busy" ? 1 / 4000 : a.presence === "offline" ? 0 : 1 / 9000;

    var ang = a.phase + (calm ? 0 : t * speed);

    return { x: p.x + ORBIT * Math.cos(ang), y: p.y + ORBIT * Math.sin(ang) };

  }

  function frame(now) {

    var t = now - start;

    for (var name in agents) {

      var q = agentAt(name, t), a = agents[name];

      a.node.setAttribute("cx", q.x.toFixed(1)); a.node.setAttribute("cy", q.y.toFixed(1));

      a.label.setAttribute("x", q.x.toFixed(1)); a.label.setAttribute("y", (q.y + 18).toFixed(1));

    }

    for (var p in prisms) {

      var r = calm ? 0 : (t / 60) % 360;

      prisms[p].g.setAttribute("transform", "translate(" + prisms[p].x.toFixed(1) + "," + prisms[p].y.toFixed(1) + ") rotate(" + r.toFixed(1) + ")");

    }

    if (!calm) {

      var stars = layer.stars.childNodes;

      for (var i = 0; i < stars.length; i += 3) stars[i].setAttribute("opacity", (0.35 + 0.3 * Math.sin(t / 900 + stars[i].twinkle)).toFixed(2));

    }

    requestAnimationFrame(frame);

  }

  function animate(ms, step, done) {

    var t0 = performance.now();

    function tick(now) {

      var k = Math.min((now - t0) / ms, 1);

      step(k);

      if (k < 1) requestAnimationFrame(tick); else if (done) done();

    }

    requestAnimationFrame(tick);

  }

  // A ring of light that grows and fades at a point.

  function pulse(at, colour, size) {

    if (!at) return;

    var c = el("circle", { "class": "ring", cx: at.x.toFixed(1), cy: at.y.toFixed(1), r: 6, stroke: colour }, layer.beams);

    animate(calm ? 1 : 900, function (k) { c.setAttribute("r", (6 + k * size).toFixed(1)); c.setAttribute("opacity", (1 - k).toFixed(2)); },

      function () { c.remove(); });

  }

  // A beam that shoots from one point to another, then fades.

  function beam(from, to, hue) {

    if (!from || !to) return;

    var colour = "hsl(" + hue + ",95%,62%)";

    var line = el("line", { "class": "beam", x1: from.x.toFixed(1), y1: from.y.toFixed(1), x2: from.x.toFixed(1), y2: from.y.toFixed(1), stroke: colour }, layer.beams);

    animate(calm ? 1 : 650, function (k) {

      var e = 1 - Math.pow(1 - k, 3);

      line.setAttribute("x2", (from.x + (to.x - from.x) * e).toFixed(1));

      line.setAttribute("y2", (from.y + (to.y - from.y) * e).toFixed(1));

    }, function () {

      pulse(to, colour, 30);

      animate(calm ? 1 : 700, function (k) { line.setAttribute("opacity", (1 - k).toFixed(2)); }, function () { line.remove(); });

    });

  }

  function from(actor) {

    if (actor === "human") return { x: CX, y: CY };

    return agentAt(String(actor || "").replace(/^agent:/, ""), performance.now() - start);

  }

  var timer = null;

  function reload() {

    clearTimeout(timer);

    timer = setTimeout(function () {

      fetch("/radar/constellation.json", { credentials: "same-origin" })

        .then(function (r) { return r.ok ? r.json() : null; })

        .then(function (d) { if (d) { data = d; build(); } });

    }, 250);

  }

  build();

  requestAnimationFrame(frame);

  if (!window.EventSource) return;

  var es = new EventSource("/radar/events");

  es.onmessage = function (m) {

    var e;

    try { e = JSON.parse(m.data); } catch (_) { return; }

    var k = e.kind || "";

    if (k === "message.posted") {

      var p = e.project && prisms[e.project];

      var to = p ? { x: p.x, y: p.y } : { x: CX, y: CY };

      var hue = p ? p.hue : 200;

      if (e.actor === "human" && !p) { pulse({ x: CX, y: CY }, "hsl(200,95%,62%)", 60); return; }

      beam(from(e.actor), to, e.actor === "human" ? 50 : hue);

    } else if (k === "tool.called") {

      pulse(from(e.actor), "#58a6ff", 16);

    } else if (k.indexOf("guard.") === 0) {

      pulse(from(e.subject ? "agent:" + e.subject : e.actor) || { x: CX, y: CY }, "#f85149", 70);

    } else if (/^(agent\.|project\.)/.test(k)) {

      reload();

    }

  };

})();