// ============================================================================
// Imara - the traffic map: servers in columns by their tier label, lines for
// the TCP connections recorded in the last 24 hours, coloured by what Imara
// does with each connection at its destination (an estimate: terms.js
// connectionVerdict). Click a server to see its blast radius.
// ============================================================================
const { useState: useStateT, useMemo: useMemoT } = React;

// Columns follow the tier labels the servers carry: common tiers in their
// usual left-to-right order, then any others alphabetically, then OTHER for
// servers without a tier label. Set from the servers on each render.
const COMMON_TIERS = ["edge", "lb", "adc", "web", "app", "api", "mq", "cache", "infra", "db"];
let TIER_X = { other: 500 };
let TIER_ORDER = ["other"];
function setColumns(SERVERS) {
  const present = Array.from(new Set((SERVERS || []).map((s) => s.tier).filter(Boolean)));
  present.sort((a, b) => {
    const ia = COMMON_TIERS.indexOf(a), ib = COMMON_TIERS.indexOf(b);
    return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib) || a.localeCompare(b);
  });
  const cols = present.concat((SERVERS || []).some((s) => !s.tier) ? ["other"] : []);
  const n = Math.max(1, cols.length);
  TIER_X = {}; cols.forEach((t, i) => { TIER_X[t] = Math.round(75 + (n === 1 ? 425 : (i * 850) / (n - 1))); });
  if (TIER_X.other == null) TIER_X.other = 925;
  TIER_ORDER = cols.length ? cols : ["other"];
}
// One colour per application label, chosen from the name (no fixed list).
const APP_PALETTE = ["#38bdf8", "#a78bfa", "#34d399", "#f59e0b", "#f472b6", "#22d3ee"];
const appColor = (app) => {
  if (!app) return "#94a3b8";
  let h = 0;
  for (const ch of String(app)) h = (h * 31 + ch.charCodeAt(0)) >>> 0;
  return APP_PALETTE[h % APP_PALETTE.length];
};
const VERDICT = {
  allowed: { c: "#34d399", label: "allowed" },
  open: { c: "#fbbf24", label: "open: default deny off" },
  blocked: { c: "#f43f5e", label: "blocked" },
  unknown: { c: "#94a3b8", label: "unknown" },
};
const verdictOf = (e) => VERDICT[e.verdict] || VERDICT.unknown;
const FRESH_C = { live: "#22c55e", stale: "#f59e0b", silent: "#ef4444" };
const tierCol = (s) => (s.tier && TIER_X[s.tier] != null ? s.tier : "other");

function layout(SERVERS) {
  const cols = {};
  (SERVERS || []).forEach((s) => { (cols[tierCol(s)] ||= []).push(s); });
  const pos = {};
  const top = 60, bot = 540;
  // A column with one server sits a little above or below the middle, in
  // turn, so a line between two columns does not run through the server
  // of the column between them.
  TIER_ORDER.forEach((tier, ci) => {
    const list = (cols[tier] || []).slice().sort((a, b) =>
      (a.app || "") === (b.app || "") ? (a.hostname || "").localeCompare(b.hostname || "") : (a.app || "").localeCompare(b.app || ""));
    const n = list.length;
    list.forEach((s, i) => {
      const y = n === 1 ? (top + bot) / 2 + (ci % 2 ? 45 : -45) : top + (i / (n - 1)) * (bot - top);
      pos[s.agent_id] = { x: TIER_X[tier], y, s };
    });
  });
  return pos;
}

// CMP-{SITE}-{ROLE}-V{NNN} hostnames get a compact label; anything else is
// shown as-is (trimmed), never as "undefined".
function shortName(hostname) {
  const h = hostname || "";
  const p = h.split(".")[0].split(/[-_]/);
  if (p.length >= 4 && /^V\d+$/i.test(p[3])) return `${p[2]} · ${p[1]} · ${p[3]}`;
  return h.length > 16 ? h.slice(0, 15) + "…" : h;
}

function TopologyMap({ height = 560, onOpenHost, onCreateRule }) {
  const T = window.ImaraTerms;
  const SERVERS = window.MS_DATA.SERVERS || [];
  // Estimates follow the latest evidence and its age: worked out again when
  // the loaded data changes (each list is replaced, never edited in place)
  // and every minute (report ages), not on every hover.
  const MD = window.MS_DATA;
  const minute = Math.floor(T.serverNow() / 60000);
  const TOPO_EDGES = useMemoT(() => T.edgesWithVerdicts(MD), [MD.SERVERS, MD.byId, MD.INTENTS, MD.GROUPS, MD.TOPO_EDGES, MD.POLICY_INCOMPLETE, MD.FW_VERSION, minute]);
  const [appFilter, setAppFilter] = useStateT("all");
  const [showDenied, setShowDenied] = useStateT(true);
  const [sel, setSel] = useStateT(null);
  const [hover, setHover] = useStateT(null);
  const [find, setFind] = useStateT("");
  const [allEdges, setAllEdges] = useStateT(false);
  // A large fleet cannot be drawn readably: above MAP_LIMIT servers, the
  // PER_COLUMN busiest servers of each column in the chosen application,
  // plus the selected server and the servers it talks to. Exposure still
  // counts every connection.
  const MAP_LIMIT = 80, PER_COLUMN = 14;
  const pool = appFilter === "all" ? SERVERS : SERVERS.filter((s) => s.app === appFilter);
  const drawnIds = useMemoT(() => {
    if (SERVERS.length <= MAP_LIMIT) return null;
    const flowsBy = {};
    TOPO_EDGES.forEach((e) => { flowsBy[e.from] = (flowsBy[e.from] || 0) + (e.flows || 0); flowsBy[e.to] = (flowsBy[e.to] || 0) + (e.flows || 0); });
    const byColumn = {};
    pool.forEach((s) => { (byColumn[s.tier || "other"] ||= []).push(s); });
    const keep = new Set();
    Object.values(byColumn).forEach((list) => list.slice().sort((a, b) => (flowsBy[b.agent_id] || 0) - (flowsBy[a.agent_id] || 0)).slice(0, PER_COLUMN).forEach((s) => keep.add(s.agent_id)));
    // The selected server and the 40 servers it talks to most.
    if (sel) {
      keep.add(sel);
      const nb = {};
      TOPO_EDGES.forEach((e) => { if (e.from === sel) nb[e.to] = (nb[e.to] || 0) + (e.flows || 0); if (e.to === sel) nb[e.from] = (nb[e.from] || 0) + (e.flows || 0); });
      Object.keys(nb).sort((a, b) => nb[b] - nb[a]).slice(0, 40).forEach((id) => keep.add(id));
    }
    return keep;
  }, [SERVERS, TOPO_EDGES, appFilter, sel]);
  const shownServers = drawnIds ? SERVERS.filter((s) => drawnIds.has(s.agent_id)) : SERVERS;
  setColumns(shownServers);
  // Re-laid out whenever the fleet, the application or the drawn servers change.
  const pos = useMemoT(() => layout(shownServers), [SERVERS, drawnIds]);
  const showOther = TIER_ORDER.includes("other");
  // Which servers a large fleet's map shows: said in the tooltip of the
  // header count and in the map's help, not in a line of its own.
  const drawnNote = !drawnIds ? "" : (shownServers.length < pool.length ? `Busiest ${PER_COLUMN} servers per column: ${shownServers.length} of ${pool.length.toLocaleString("en-US")}${appFilter !== "all" ? " in this application" : ""}` : `All ${pool.length} servers of this application`)
    + (sel ? ", plus up to 40 top peers of the selected server" : "") + ". "
    + (shownServers.length < pool.length ? "Pick an application, or click a server to add its peers." : "Click a server to add its peers.");

  // Exposure: every connection that is NOT blocked counts as a path. Open and
  // "cannot tell" connections count too, so exposure is never understated.
  const reachable = (e) => e.verdict !== "blocked";
  const reach = useMemoT(() => {
    if (!sel) return null;
    const out = {}, inb = {};
    TOPO_EDGES.forEach((e) => {
      if (!reachable(e)) return;
      (out[e.from] ||= []).push(e.to); (inb[e.to] ||= []).push(e.from);
    });
    const bfs = (adj) => {
      const seen = new Set([sel]); const q = [sel];
      while (q.length) { const cur = q.shift(); (adj[cur] || []).forEach((n) => { if (!seen.has(n)) { seen.add(n); q.push(n); } }); }
      seen.delete(sel); return seen;
    };
    const seen = bfs(out);          // transitive egress — what this host could reach if compromised
    const reachedBy = bfs(inb);     // transitive ingress — who could pivot into this host
    const directIn = new Set(inb[sel] || []);
    const egressEdges = TOPO_EDGES.filter((e) => e.from === sel);   // direct outbound, with port
    const ingressEdges = TOPO_EDGES.filter((e) => e.to === sel);    // direct inbound, with port
    const openPaths = TOPO_EDGES.filter((e) => (e.from === sel || e.to === sel) && e.verdict === "open").length;
    return { reach: seen, reachedBy, directIn, egressEdges, ingressEdges, openPaths };
  }, [sel, TOPO_EDGES]);

  const focus = hover || sel;
  const focusEdges = useMemoT(() => {
    if (!focus) return null;
    const set = new Set();
    TOPO_EDGES.forEach((e, i) => { if (e.from === focus || e.to === focus) set.add(i); });
    return set;
  }, [focus, TOPO_EDGES]);

  const visible = (s) => appFilter === "all" || s.app === appFilter;
  const selServer = sel ? window.MS_DATA.byId[sel] : null;

  // Several services between the same two servers get separate curves, so
  // one verdict never hides another.
  // Keyed by the pair of servers in either direction, so A to B and B to A
  // are drawn apart too; arrowheads show the direction.
  const pairSlot = {};
  const pairCount = {};
  const pairKey = (e) => [e.from, e.to].sort().join("|");
  TOPO_EDGES.forEach((e) => { const k = pairKey(e); pairCount[k] = (pairCount[k] || 0) + 1; });
  // Curves bow out sideways from the straight line between the two
  // servers, each service of a pair a little further, measured the same way
  // for both directions; servers in one column bow out more, so their lines
  // never lie on top of each other.
  function edgePath(a, b, e) {
    const k = pairKey(e);
    const slot = (pairSlot[k] = (pairSlot[k] == null ? 0 : pairSlot[k] + 1));
    const [p, q] = e.from < e.to ? [a, b] : [b, a];
    const dx = q.x - p.x, dy = q.y - p.y, len = Math.hypot(dx, dy) || 1;
    const nx = dy / len, ny = -dx / len;
    const sameColumn = Math.abs(dx) < 1;
    const off = Math.min(60, len * 0.12) + (sameColumn ? 40 : 0) + (slot - (pairCount[k] - 1) / 2) * 22;
    const cx = (a.x + b.x) / 2 + nx * off, cy = (a.y + b.y) / 2 + ny * off;
    return `M${a.x},${a.y} Q${cx},${cy} ${b.x},${b.y}`;
  }
  // Blocked connections are drawn last, so other lines never hide them.
  const DRAW_ORDER = { allowed: 0, open: 1, unknown: 2, blocked: 3 };
  const drawn = TOPO_EDGES.map((e, i) => ({ e, i })).sort((x, y) => (DRAW_ORDER[x.e.verdict] || 2) - (DRAW_ORDER[y.e.verdict] || 2) || x.i - y.i);

  const maxFlows = Math.max(1, ...TOPO_EDGES.map((e) => e.flows || 0));

  return (
    <div className="card" style={{ overflow: "hidden", display: "flex", flexDirection: "column", height: height + 60 }}>
      <div className="card-head spread">
        <div className="row gap10">
          <span className="card-title">Traffic map<Help label="How to read this map" width={420}>
            <p><b>Blast radius.</b> Click a server to see what it could reach if compromised, directly or through other servers. Uses recorded connections not confirmed blocked, unknown ones included.</p>
            <p><b>Colours.</b> Green: allowed by a rule. Amber, dashed: open, default deny is off on the destination. Red: would be blocked. Grey, dashed: cannot confirm.</p>
            <p>Estimated from each destination's firewall report and rules. Only TCP is recorded. Group rules use the group's members as of the destination's last firewall update. A server that joined since (new or relabelled) may not be covered until the next update. Any change approved for that destination triggers one.</p>
            <p><b>Columns.</b> Servers are placed by tier label, from edge (left) to databases (right); servers without one are under OTHER. Traffic usually flows left to right, so reverse flows stand out.</p>
            {drawnIds && <p><b>Servers shown.</b> {drawnNote}</p>}
          </Help></span>
          <span title={drawnNote || undefined} style={{ display: "inline-flex" }}><Badge tone="neutral" sq>{drawnIds ? `${shownServers.length} of ${SERVERS.length.toLocaleString("en-US")} servers shown` : T.plural(SERVERS.length, "server")} · {T.plural(TOPO_EDGES.length, "flow")}</Badge></span>
        </div>
        <div className="row gap8 wrap">
          {Object.keys(window.MS_DATA.APP_NAMES || {}).length > 6 ? (
            <select className="input" style={{ width: 200, fontSize: 12 }} value={appFilter} onChange={(e) => setAppFilter(e.target.value)} title="Show one application's servers">
              <option value="all">All applications</option>
              {Object.keys(window.MS_DATA.APP_NAMES || {}).sort().map((a) => <option key={a} value={a}>{String(window.MS_DATA.APP_NAMES[a]).toUpperCase()}</option>)}
            </select>
          ) : (
            <div className="seg">
              {["all", ...Object.keys(window.MS_DATA.APP_NAMES || {})].map((a) => (
                <button key={a} className={cx(appFilter === a && "on")} onClick={() => setAppFilter(a)}>
                  {a === "all" ? "All applications" : String(window.MS_DATA.APP_NAMES[a]).toUpperCase()}
                </button>
              ))}
            </div>
          )}
          {SERVERS.length > MAP_LIMIT && (
            <React.Fragment>
              <input className="input" list="map-servers" style={{ width: 210, fontSize: 12 }} placeholder="Find a server by name" value={find}
                onChange={(e) => { const v = e.target.value; setFind(v); const s = SERVERS.find((x) => String(x.hostname).toLowerCase() === v.trim().toLowerCase()); if (s) { setAppFilter("all"); setSel(s.agent_id); } }} />
              <datalist id="map-servers">{(find.trim() ? SERVERS.filter((s) => String(s.hostname).toLowerCase().includes(find.trim().toLowerCase())) : SERVERS).slice(0, 50).map((s) => <option key={s.agent_id} value={s.hostname} />)}</datalist>
            </React.Fragment>
          )}
          <button className={cx("btn sm", showDenied && "primary")} onClick={() => setShowDenied((v) => !v)} title="Show or hide blocked connections">
            <Icon name="ShieldAlert" size={13} /> Blocked
          </button>
        </div>
      </div>

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: sel ? "1fr 360px" : "1fr", flex: 1, minHeight: 0, overflow: "hidden" }}>
        <div style={{ background: "var(--bg-deep)", minWidth: 0, overflow: "hidden" }}>
          <svg width="100%" height={height} viewBox="0 -24 1000 620" preserveAspectRatio="xMidYMid meet" style={{ display: "block" }}>
              <defs>
                {Object.entries(VERDICT).map(([k, v]) => (
                  <marker key={k} id={`arrow-${k}`} viewBox="0 0 10 10" refX="22" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
                    <path d="M 0 0 L 10 5 L 0 10 z" fill={v.c} />
                  </marker>
                ))}
              </defs>
              {/* tier guide columns */}
              {TIER_ORDER.filter((t) => t !== "other" || showOther).map((t) => (
                <g key={t}>
                  <line x1={TIER_X[t]} y1={40} x2={TIER_X[t]} y2={560} stroke="var(--grid-line)" strokeWidth="28" strokeLinecap="round" />
                  <text x={TIER_X[t]} y={28} textAnchor="middle" fontSize="11" fontWeight="600"
                    fill="var(--text-faint)" style={{ textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "var(--font-mono)" }}>
                    {t}
                  </text>
                </g>
              ))}
              {/* edges */}
              {drawn.map(({ e, i }) => {
                const a = pos[e.from], b = pos[e.to];
                if (!a || !b) return null;
                if (e.verdict === "blocked" && !showDenied) return null;
                if (!visible(a.s) && !visible(b.s)) return null;
                const v = verdictOf(e);
                const dim = focusEdges && !focusEdges.has(i);
                const inReach = reach && reachable(e) && (reach.reach.has(e.to) || e.from === sel) && (reach.reach.has(e.from) || e.from === sel);
                const hot = focusEdges && focusEdges.has(i);
                const w = 1 + (e.flows / maxFlows) * 3.5;
                return (
                  <path key={i} d={edgePath(a, b, e)} fill="none" stroke={v.c} markerEnd={`url(#arrow-${e.verdict || "unknown"})`}
                    strokeWidth={hot ? w + 1 : w}
                    strokeDasharray={e.verdict === "open" || e.verdict === "unknown" ? "5 5" : hot && e.verdict === "allowed" ? "8 6" : "none"}
                    strokeLinecap="round"
                    style={{
                      opacity: dim ? 0.07 : reach ? (inReach || e.verdict === "blocked" ? 0.9 : 0.08) : (hot ? 1 : e.verdict === "blocked" ? 0.85 : 0.5),
                      transition: "opacity .2s, stroke-width .2s",
                    }}
                    className={hot && e.verdict === "allowed" ? "flow-dash" : ""}>
                    <title>{`${(window.MS_DATA.byId[e.from] || {}).hostname || e.from} to ${(window.MS_DATA.byId[e.to] || {}).hostname || e.to} on ${T.serviceName("tcp/" + e.port)}: ${e.why || v.label}`}</title>
                  </path>
                );
              })}
              {/* nodes */}
              {shownServers.map((s) => {
                const p = pos[s.agent_id]; if (!p) return null;
                const vis = visible(s);
                const isFocus = focus === s.agent_id;
                const isReach = reach && reach.reach.has(s.agent_id);
                const isInbound = reach && reach.directIn.has(s.agent_id);
                const dimmed = (focus && !isFocus && !(focusEdges && [...focusEdges].some((i) => TOPO_EDGES[i].from === s.agent_id || TOPO_EDGES[i].to === s.agent_id))) ||
                  (reach && !isReach && !isInbound && s.agent_id !== sel) || !vis;
                const r = 13;
                return (
                  <g key={s.agent_id} transform={`translate(${p.x},${p.y})`}
                    style={{ cursor: "pointer", opacity: dimmed ? 0.22 : 1, transition: "opacity .2s" }}
                    onMouseEnter={() => setHover(s.agent_id)} onMouseLeave={() => setHover(null)}
                    onClick={() => setSel(sel === s.agent_id ? null : s.agent_id)}>
                    {T.protectionNow(s, window.MS_DATA).state === "on" && <circle r={r + 5} fill="none" stroke={appColor(s.app)} strokeOpacity="0.25" strokeWidth="1.5" />}
                    {(isFocus || s.agent_id === sel) && <circle r={r + 7} fill="none" stroke="var(--accent)" strokeWidth="2" className="ping" />}
                    <circle r={r} fill={appColor(s.app) + "22"} stroke={FRESH_C[s.fresh]} strokeWidth="2.5" />
                    <text textAnchor="middle" y="4.5" fontSize="9.5" fontWeight="700" fill={appColor(s.app)}
                      style={{ fontFamily: "var(--font-mono)", pointerEvents: "none", textTransform: "uppercase" }}>{s.role || (s.labels && s.labels._hn_part_2) || ""}</text>
                    <text textAnchor="middle" y={r + 14} fontSize="9" fill="var(--text-subtle)"
                      style={{ fontFamily: "var(--font-mono)", pointerEvents: "none" }}>{shortName(s.hostname)}</text>
                  </g>
                );
              })}
          </svg>

          {/* legend footer */}
          <div className="row wrap" style={{ gap: 16, padding: "8px 14px", borderTop: "1px solid var(--border)", background: "var(--bg-elevated)" }}>
            {Object.entries(VERDICT).map(([k, v]) => (
              <span key={k} className="row gap6" style={{ fontSize: 11, color: "var(--text-muted)", whiteSpace: "nowrap" }}>
                <span style={{ width: 16, height: 0, borderTop: `2.5px ${k === "open" || k === "unknown" ? "dashed" : "solid"} ${v.c}` }} /> {v.label}
              </span>
            ))}
            <span className="row gap6" style={{ fontSize: 11, color: "var(--text-muted)", whiteSpace: "nowrap" }}>
              <Icon name="Circle" size={11} style={{ color: "#22c55e" }} /> online
              <Icon name="Circle" size={11} style={{ color: "#f59e0b", marginLeft: 6 }} /> delayed
              <Icon name="Circle" size={11} style={{ color: "#ef4444", marginLeft: 6 }} /> offline
            </span>
          </div>
        </div>

        {/* exposure side panel */}
        {sel && selServer && (() => {
          const D = window.MS_DATA;
          const host = (id) => (D.byId[id] && D.byId[id].hostname) || id;
          // A group that contains a server, the most specific first, to
          // prefill the rule page (shown there for review).
          // The smallest group with this server in it, or the server itself
          // when no group has it.
          const groupFor = (id) => {
            const srv = D.byId[id];
            if (!srv) return "";
            const gs = (D.GROUPS || []).filter((g) => !T.isEmptySelector(g.selector) && !T.isServerGroup(g) && T.membersOf(g.selector, [srv]).length);
            gs.sort((x, y) => T.groupMembers(x.selector, D.SERVERS).length - T.groupMembers(y.selector, D.SERVERS).length);
            return gs[0] ? gs[0].name : "server:" + srv.agent_id;
          };
          // The reason is written under a connection only when it is unusual
          // (blocked, or the console cannot tell); for the usual ones (allowed
          // by a rule, open because protection is off) the colour says it and
          // the reason shows on pointing at the connection.
          const row = (e, i, otherId, icon) => (
            <div key={i} className="col" style={{ gap: 2, padding: "6px 0", borderBottom: "1px solid var(--border)" }}>
              <div className="spread" style={{ fontSize: 11.5 }} title={e.why || verdictOf(e).label}>
                <span className="row gap6 mono" style={{ color: "var(--text-muted)" }}><Icon name={icon} size={12} style={{ color: verdictOf(e).c }} />{host(otherId)}</span>
                <span style={{ color: verdictOf(e).c }}>{T.serviceName("tcp/" + e.port)}</span>
              </div>
              {e.verdict === "open" && <div style={{ fontSize: 11, lineHeight: 1.35, color: verdictOf(e).c }}>{verdictOf(e).label}</div>}
              {e.verdict !== "allowed" && e.verdict !== "open" && <div className="faint" style={{ fontSize: 11, lineHeight: 1.35 }}>{e.why || verdictOf(e).label}</div>}
              {onCreateRule && e.verdict !== "allowed" && !/^Always blocked by/.test(e.why || "") && (
                <button className="btn ghost sm" style={{ alignSelf: "flex-start", padding: "2px 6px", height: "auto" }}
                  onClick={() => onCreateRule({ from: groupFor(e.from), to: groupFor(e.to), specs: ["tcp/" + e.port] })}>
                  <Icon name="Plus" size={11} /> Create a rule for this connection
                </button>
              )}
            </div>
          );
          return (
            <div style={{ borderLeft: "1px solid var(--border)", background: "var(--bg-elevated)", overflowY: "auto", minHeight: 0, padding: 16 }} className="fadein">
              <div className="spread" style={{ marginBottom: 4 }}>
                <Badge tone="accent" sq>Blast radius</Badge>
                <button className="icon-btn" onClick={() => setSel(null)}><Icon name="X" size={15} /></button>
              </div>
              <div className="mono" style={{ fontSize: 14, fontWeight: 600, marginTop: 8 }}>{selServer.hostname}</div>
              <div className="row gap6" style={{ marginTop: 6, flexWrap: "wrap" }}>
                <Badge tone={selServer.fresh === "live" ? "ok" : selServer.fresh === "stale" ? "warn" : "bad"} dot>{T.freshnessText(selServer.fresh)}</Badge>
                {(() => { const f = T.serverFacts(selServer).find(([k]) => k === "_hn_part_2" || k === "tier"); return f ? <Badge tone="neutral" sq>{T.labelText(f[0], f[1])}</Badge> : null; })()}
                {(() => { const st = T.protectionNow(selServer, window.MS_DATA).state; return <Badge tone={st === "on" ? "ok" : st === "off" ? "neutral" : "warn"} sq>default deny: {T.protectionWord(st).toLowerCase()}</Badge>; })()}
              </div>

              <div className="row gap8" style={{ marginTop: 16 }}>
                <div style={{ flex: 1, padding: 12, borderRadius: "var(--r-md)", background: reach.reach.size > 6 ? "var(--warn-bg)" : "var(--bg-raised)", border: `1px solid ${reach.reach.size > 6 ? "var(--warn-border)" : "var(--border)"}` }}>
                  <div className="row gap6"><Icon name="Radius" size={14} style={{ color: reach.reach.size > 6 ? "var(--warn)" : "var(--accent)" }} /><span style={{ fontSize: 20, fontWeight: 700 }} className="tnum">{reach.reach.size}</span></div>
                  <div className="subtle" style={{ fontSize: 11, marginTop: 2 }}>servers it could reach, directly or via others</div>
                </div>
                <div style={{ flex: 1, padding: 12, borderRadius: "var(--r-md)", background: "var(--bg-raised)", border: "1px solid var(--border)" }}>
                  <div className="row gap6"><Icon name="Crosshair" size={14} style={{ color: "var(--accent)" }} /><span style={{ fontSize: 20, fontWeight: 700 }} className="tnum">{reach.reachedBy.size}</span></div>
                  <div className="subtle" style={{ fontSize: 11, marginTop: 2 }}>servers that could reach it</div>
                </div>
              </div>
              <div className="faint" style={{ fontSize: 11, marginTop: 8, lineHeight: 1.45 }}>
                Counted from the latest {T.plural(window.MS_DATA.FLOWS_COUNT || 0, "connection")}.{reach.openPaths ? ` ${T.plural(reach.openPaths, "connection is", "connections are")} open only because default deny is off.` : ""}
                <Help label="How these are counted">
                  <p>Counts the connections not confirmed blocked, unknown ones included, among the latest {T.plural(window.MS_DATA.FLOWS_COUNT || 0, "connection")}{window.MS_DATA.FLOWS_SINCE ? ` (since ${new Date(window.MS_DATA.FLOWS_SINCE).toLocaleString()})` : ""}. Both servers record a connection between them. Connections outside that sample are not counted.</p>
                  <p>Hover over a connection below to see the reason for its colour.</p>
                </Help>
              </div>

              <div className="col" style={{ marginTop: 14 }}>
                <div className="stat-label" style={{ marginBottom: 4 }}>Outbound to</div>
                {reach.egressEdges.length === 0 && <div className="faint" style={{ fontSize: 12 }}>No outbound connections to other servers recorded.</div>}
                {reach.egressEdges.slice().sort((a, b) => (b.flows || 0) - (a.flows || 0)).slice(0, allEdges ? undefined : 10).map((e, i) => row(e, i, e.to, "CornerDownRight"))}
                {reach.egressEdges.length > 10 && <button className="btn ghost sm" style={{ alignSelf: "flex-start" }} onClick={() => setAllEdges((v) => !v)}>{allEdges ? "Show the busiest 10" : `Show all ${reach.egressEdges.length}`}</button>}
              </div>
              <div className="col" style={{ marginTop: 14 }}>
                <div className="stat-label" style={{ marginBottom: 4 }}>Inbound from</div>
                {reach.ingressEdges.length === 0 && <div className="faint" style={{ fontSize: 12 }}>No inbound connections from other servers recorded.</div>}
                {reach.ingressEdges.slice().sort((a, b) => (b.flows || 0) - (a.flows || 0)).slice(0, allEdges ? undefined : 10).map((e, i) => row(e, i, e.from, "CornerLeftUp"))}
                {reach.ingressEdges.length > 10 && <button className="btn ghost sm" style={{ alignSelf: "flex-start" }} onClick={() => setAllEdges((v) => !v)}>{allEdges ? "Show the busiest 10" : `Show all ${reach.ingressEdges.length}`}</button>}
              </div>

              {onOpenHost && (
                <button className="btn sm" style={{ marginTop: 16, width: "100%", justifyContent: "center" }} onClick={() => onOpenHost(selServer)}>
                  Open the server <Icon name="ArrowRight" size={13} />
                </button>
              )}
            </div>
          );
        })()}
      </div>
    </div>
  );
}

window.TopologyMap = TopologyMap;