// ============================================================================
// Imara - core pages: Overview, Traffic map, Servers
// ============================================================================

// ---------- OVERVIEW ----------
// What needs attention first, then the fleet at a glance. Every number comes
// from live data; incoming protection from each server's own firewall report.
function OverviewPage({ nav, openHost, openAlert, openIntent, intents, alerts }) {
  const D = window.MS_DATA;
  const T = window.ImaraTerms;
  const c = D.fleetCounts;
  // Busiest servers: the Imara server's own last-hour per-server counts
  // (GET /api/stats/overview top_hosts_1h). Without it, fall back to the
  // sampled traffic map and say so.
  const serverTop = Array.isArray(D.TOP_HOSTS_1H);
  const topHosts = serverTop
    ? D.TOP_HOSTS_1H.map((h) => ({ s: D.byId[h.agent_id] || { agent_id: h.agent_id, hostname: h.hostname || h.agent_id }, flows: h.flows_1h || 0, known: !!D.byId[h.agent_id] }))
    : D.SERVERS.map((s) => ({ s, known: true, flows: (D.TOPO_EDGES || []).filter((e) => e.from === s.agent_id || e.to === s.agent_id).reduce((a, e) => a + e.flows, 0) }))
      .sort((a, b) => b.flows - a.flows).slice(0, 6);
  const maxFlow = topHosts[0]?.flows || 1;
  const openA = alerts.filter((a) => a.status === "open");
  const trueOpen = D.ALERT_OPEN_COUNTS;
  const ac = trueOpen ? { critical: trueOpen.critical || 0, warn: trueOpen.warn || 0, info: trueOpen.info || 0 } : { critical: openA.filter((a) => a.severity === "critical").length, warn: openA.filter((a) => a.severity === "warn").length, info: openA.filter((a) => a.severity === "info").length };
  // Protection as of now (a report older than 15 minutes reads "unknown").
  const pstate = Object.fromEntries(D.SERVERS.map((s) => [s.agent_id, T.protectionNow(s, D).state]));
  const prot = (st) => D.SERVERS.filter((s) => pstate[s.agent_id] === st);
  const askedOff = D.SERVERS.filter((s) => pstate[s.agent_id] === "off" && T.protectionNow(s, D).contributors.some((c) => c.asks === true));
  const protOn = prot("on"), protOff = prot("off").filter((s) => !askedOff.includes(s)), protUnsure = D.SERVERS.filter((s) => ["unknown", "waiting"].includes(pstate[s.agent_id]));
  // Waiting for approval: the ones this person may approve, and the ones
  // they wrote, edited or sent (others must approve those).
  const me = (window.IMARA_ME && window.IMARA_ME.user) || "";
  const mine = (i) => !!me && [i.created_by, i.last_edited_by, i.requested_by].includes(me);
  const waitingAll = intents.filter((i) => i.approval_state === "requested");
  const waiting = waitingAll.filter((i) => !mine(i) || (i.required_approvers || 1) < 2);
  const waitingOthers = waitingAll.filter((i) => !waiting.includes(i));
  // Rules this person wrote or edited that an approver sent back.
  const sentBack = intents.filter((i) => i.approval_state === "rejected" && mine(i));
  const problems = intents.filter((i) => i.status === "error" || (i.push_errors || []).length > 0);
  // Rules naming a group the Imara server cannot use now: their servers get
  // no firewall changes at all until it is fixed.
  const refsOf = (i) => T.unusableGroupRefs(i, { groups: D.GROUPS || [], servers: D.SERVERS });
  const stuck = intents.filter((i) => refsOf(i).some((b) => b.stuck));
  const nowhere = intents.filter((i) => !stuck.includes(i) && refsOf(i).some((b) => !b.stuck));
  const silent = D.SERVERS.filter((s) => s.fresh === "silent");
  const pendingIps = D.SERVERS.filter((s) => (s.pending_ips || []).length > 0);
  const active = intents.filter((i) => T.confirmedTargets(i, D.byId || {}) > 0).length;
  const names = (list) => { const n = list.map((s) => s.hostname || (s.body !== undefined ? T.ruleTitle(s) : s.name)); return n.length > 3 ? `${n.slice(0, 3).join(", ")} and ${n.length - 3} more` : T.joinList(n); };
  // One rule: open it; several: the Rules page with that filter.
  const openRules = (list, filter) => () => { if (list.length === 1 && openIntent) openIntent(list[0]); else { IntentsPage.openWith = filter || "all"; nav("intents"); } };
  // "5 rules wait for your approval." (the names when there are one or two)
  const line = (list, one, many, rest) => `${T.plural(list.length, one, many)} ${rest}${list.length <= 2 ? `: ${names(list)}` : ""}.`;

  const attention = [
    waiting.length && { icon: "UserCheck", tone: "warn", text: line(waiting, "rule waits", "rules wait", "for your approval"), go: openRules(waiting, "waiting") },
    waitingOthers.length && { icon: "Hourglass", tone: "neutral", text: line(waitingOthers, "rule you sent awaits", "rules you sent await", "2 approvals from others"), go: openRules(waitingOthers, "waiting") },
    sentBack.length && { icon: "Pencil", tone: "warn", text: line(sentBack, "rule you sent has", "rules you sent have", "changes requested"), go: openRules(sentBack, "drafts") },
    problems.length && { icon: "OctagonAlert", tone: "bad", text: line(problems, "rule has", "rules have", "a problem on a server"), go: openRules(problems, "problems") },
    stuck.length && { icon: "OctagonAlert", tone: "bad", text: `${names(stuck)} ${stuck.length === 1 ? "names" : "name"} a group with no usable server. ${stuck.length === 1 ? "Its" : "Their"} servers get no firewall changes until fixed.`, go: openRules(stuck) },
    nowhere.length && { icon: "ShieldQuestion", tone: "warn", text: `Applies to no server now: ${names(nowhere)}.`, go: openRules(nowhere) },
    silent.length && { icon: "WifiOff", tone: "bad", text: silent.length === 1 ? `Agent offline: ${names(silent)}. Its firewall rules stay in place; changes wait until it is back.` : `${silent.length.toLocaleString("en-US")} agents offline: ${names(silent)}. Their firewall rules stay in place; changes wait until they are back.`, go: () => { if (silent.length === 1) openHost(silent[0]); else { ServersPage.openWith = "silent"; nav("servers"); } } },
    alerts.some((a) => a.status === "acknowledged") && (() => { const n = alerts.filter((a) => a.status === "acknowledged").length; return { icon: "Eye", tone: "neutral", text: `${n}${D.ALERT_ACK_PARTIAL ? "+" : ""} acknowledged alert${n === 1 && !D.ALERT_ACK_PARTIAL ? " is" : "s are"} not resolved yet.`, go: () => { AlertsPage.openWith = "acknowledged"; nav("alerts"); } }; })(),
    ac.critical + ac.warn > 0 && { icon: "Bell", tone: ac.critical ? "bad" : "warn", text: `Open alerts: ${(ac.critical + ac.warn).toLocaleString("en-US")}${ac.critical ? ` (${ac.critical} critical)` : ""}.`, go: () => nav("alerts") },
    pendingIps.length && { icon: "Network", tone: "warn", text: `New IP addresses pending approval: ${names(pendingIps)}.`, go: () => { ServerDrawer.openTab = "addresses"; openHost(pendingIps[0]); } },
    askedOff.length && { icon: "ShieldAlert", tone: "bad", text: `Default deny not in force on ${names(askedOff)}, though a rule asks for it.`, go: () => openHost(askedOff[0]) },
    protUnsure.length && { icon: "ShieldQuestion", tone: "warn", text: `Cannot confirm default deny on ${names(protUnsure)}${D.FW_LOADING ? " (firewall reports still loading)" : ""}.`, go: () => openHost(protUnsure[0]) },
    protOff.length && { icon: "Shield", tone: "neutral", text: `Default deny off: ${names(protOff)}.`, go: () => (protOff.length === 1 ? openHost(protOff[0]) : nav("groups")) },
  ].filter(Boolean);
  const toneColor = { ok: "var(--ok)", warn: "var(--warn)", bad: "var(--bad)", neutral: "var(--text-muted)" };

  return (
    <div className="scroll">
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="card">
          <div className="card-head"><span className="card-title">Needs attention</span></div>
          {attention.length === 0 && (D.LOAD_FAILED && Object.values(D.LOAD_FAILED).some(Boolean)
            ? <div className="row gap8" style={{ padding: "12px 16px", fontSize: 13 }}><Icon name="Info" size={15} style={{ color: "var(--warn)" }} /> Nothing needs attention in the data that loaded. Some data failed to load (see the notice at the top).</div>
            : <div className="row gap8" style={{ padding: "12px 16px", fontSize: 13 }}><Icon name="CircleCheck" size={15} style={{ color: "var(--ok)" }} /> Nothing needs attention right now.</div>)}
          {attention.map((x, i) => (
            <button key={i} onClick={x.go} className="row gap10" style={{ width: "100%", textAlign: "left", padding: "10px 16px", borderBottom: "1px solid var(--border)", background: "transparent", border: "none", cursor: "pointer" }}>
              <Icon name={x.icon} size={15} style={{ color: toneColor[x.tone], flexShrink: 0 }} />
              <span style={{ flex: 1, fontSize: 13, color: "var(--text)", lineHeight: 1.45 }}>{x.text}</span>
              <Icon name="ChevronRight" size={14} style={{ color: "var(--text-faint)" }} />
            </button>
          ))}
        </div>
      </section>

      <section className="section grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", paddingBottom: 0 }}>
        <Stat label="Servers" value={c.total} icon="LayoutGrid" onClick={() => nav("servers")}
          foot={c.silent ? [`${c.live} online`, c.stale && `${c.stale} delayed`].filter(Boolean).join(" · ") : c.stale ? `${c.live} online` : ""}
          trend={!c.total ? undefined : c.silent ? { tone: "bad", text: `${c.silent} offline` } : c.stale ? { tone: "warn", text: `${c.stale} delayed` } : { tone: "ok", text: "all online" }} />
        <Stat label="Default deny on" value={`${protOn.length} of ${D.SERVERS.length}`} icon="ShieldCheck" onClick={() => nav("servers")} />
        <Stat label="Rules" value={intents.length} icon="Shield" onClick={() => nav("intents")}
          foot={problems.length && waitingAll.length ? `${active} active · ${waitingAll.length} waiting` : `${active} active`}
          trend={problems.length ? { tone: "bad", text: `${problems.length} with a problem` } : waitingAll.length ? { tone: "warn", text: `${waitingAll.length} waiting` } : undefined} />
        <Stat label="Open alerts" value={trueOpen ? (ac.critical + ac.warn + ac.info) : openA.length} icon="Bell" onClick={() => nav("alerts")}
          foot={`${ac.warn} warning · ${ac.info} info`}
          trend={ac.critical ? { tone: "bad", text: `${ac.critical} critical` } : undefined} />
      </section>

      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="card">
          <div className="card-head spread">
            <span className="card-title">Connections · last hour{(D.FLOW_TS || []).length ? <span className="faint" style={{ fontWeight: 400, marginLeft: 8 }}>{fmt((D.FLOW_TS || []).reduce((a, b) => a + (b.count || 0), 0))} recorded</span> : null}<Help>Connections per minute, between your servers and to the outside. Both ends record a connection between two of your servers.</Help></span>
            <button className="btn ghost sm" onClick={() => nav("topology")}>Traffic map <Icon name="ArrowRight" size={13} /></button>
          </div>
          <div style={{ padding: "14px 8px 0" }}><Sparkline data={D.FLOW_TS} height={90} /></div>
          <div className="row spread faint" style={{ padding: "2px 12px 10px", fontSize: 11 }}><span>1 hour ago</span><span>now</span></div>
        </div>
      </section>

      {openA.length > 0 && (
        <section className="section" style={{ paddingBottom: 0 }}>
          <div className="card">
            <div className="card-head spread">
              <span className="card-title">Open alerts</span>
              <button className="btn ghost sm" onClick={() => nav("alerts")}>All alerts <Icon name="ArrowRight" size={13} /></button>
            </div>
            {openA.slice().sort((a, b) => ({ critical: 0, warn: 1, info: 2 }[a.severity] ?? 3) - ({ critical: 0, warn: 1, info: 2 }[b.severity] ?? 3) || (String(b.created_at) > String(a.created_at) ? 1 : -1)).slice(0, 5).map((a) => (
              <button key={a.id} className="row gap12" onClick={() => openAlert(a)} style={{ width: "100%", textAlign: "left", padding: "9px 16px", borderBottom: "1px solid var(--border)", background: "transparent", border: "none" }}>
                <Badge tone={SEV[a.severity]} sq style={{ width: 72, justifyContent: "center" }}>{a.severity === "warn" ? "warning" : a.severity}</Badge>
                <span style={{ flex: 1, fontSize: 12.5, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{T.alertName(a.kind)}</span>
                {a.server_id && <span className="mono faint" style={{ fontSize: 11, whiteSpace: "nowrap" }}>{D.byId[a.server_id]?.hostname}</span>}
                <span className="faint" style={{ fontSize: 11, whiteSpace: "nowrap" }}>{agoLong(a.created_at)}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      <section className="section grid" style={{ gridTemplateColumns: "1.7fr 1fr" }}>
        <div className="card">
          <div className="card-head spread"><span className="card-title">{serverTop ? "Busiest servers · last hour" : "Busiest servers · from the traffic map"}</span>{!serverTop && <span className="row faint" style={{ fontSize: 11 }}>last-hour counts unavailable<Help>Counted from the latest {T.plural(D.FLOWS_COUNT || 0, "connection")}{D.FLOWS_SINCE ? ` (since ${new Date(D.FLOWS_SINCE).toLocaleTimeString()})` : ""}.</Help></span>}</div>
          {topHosts.length === 0 && <div className="faint" style={{ padding: 16, fontSize: 12 }}>No connections recorded.</div>}
          {topHosts.map(({ s, flows, known }, i) => (
            <button key={s.agent_id} onClick={() => known && openHost(s)} className="row gap12" style={{ width: "100%", padding: "8px 16px", borderBottom: "1px solid var(--border)", background: "transparent", border: "none", textAlign: "left", cursor: known ? "pointer" : "default" }}>
              <span className="mono faint" style={{ width: 16, fontSize: 11 }}>{i + 1}</span>
              <span className="mono" style={{ flex: 1, fontSize: 12, color: "var(--text)" }}>{s.hostname}</span>
              <span className="mono muted tnum" style={{ fontSize: 11.5, width: 110, textAlign: "right" }}>{fmt(flows)} conn.</span>
              <div style={{ width: 90 }}><Meter value={flows} max={maxFlow} /></div>
            </button>
          ))}
        </div>
        <div className="card">
          <div className="card-head"><span className="card-title">Default deny<Help><p>On: inbound traffic that no rule allows is blocked.</p><p>From each server's latest firewall report.</p></Help></span></div>
          <div className="col gap8" style={{ padding: "12px 16px" }}>
            {(() => {
              // Counts first; then every server on a small fleet, or the
              // first ones without confirmed protection on a large one.
              const n = { on: 0, off: 0, waiting: 0, unknown: 0 };
              D.SERVERS.forEach((s) => { n[pstate[s.agent_id]] = (n[pstate[s.agent_id]] || 0) + 1; });
              return D.SERVERS.length > 12 && (
                <div className="row gap6 wrap">
                  {["on", "off", "waiting", "unknown"].filter((k) => n[k]).map((k) => <Badge key={k} tone={k === "on" ? "ok" : k === "off" ? "neutral" : "warn"} sq>{T.protectionWord(k)}: {n[k].toLocaleString("en-US")}</Badge>)}
                </div>
              );
            })()}
            {(D.SERVERS.length > 12 ? D.SERVERS.filter((s) => pstate[s.agent_id] !== "on").slice(0, 8) : D.SERVERS).map((s) => {
              const st = pstate[s.agent_id];
              return (
                <button key={s.agent_id} className="spread" onClick={() => openHost(s)} style={{ background: "transparent", border: "none", padding: 0, cursor: "pointer", textAlign: "left" }}>
                  <span className="mono" style={{ fontSize: 12, color: "var(--text)" }}>{s.hostname}</span>
                  <Badge tone={st === "on" ? "ok" : st === "off" ? "neutral" : "warn"} sq>{T.protectionWord(st)}</Badge>
                </button>
              );
            })}
            {D.SERVERS.length === 0 && <div className="faint" style={{ fontSize: 12 }}>No servers yet.</div>}
            {D.SERVERS.length > 12 && (() => {
              const notOn = D.SERVERS.filter((s) => pstate[s.agent_id] !== "on").length;
              return notOn > 8 ? <button className="btn ghost sm" style={{ alignSelf: "flex-start" }} onClick={() => { ServersPage.openWith = "notOn"; nav("servers"); }}>All {notOn.toLocaleString("en-US")} servers without default deny</button>
                : notOn === 0 ? <div className="faint" style={{ fontSize: 12 }}>On for every server.</div> : null;
            })()}
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- TRAFFIC MAP ----------
// How to read the map (exposure, colours, columns) is in its own help.
function TopologyPage({ openHost, onCreateRule }) {
  return (
    <div className="scroll">
      <section className="section">
        <TopologyMap height={720} onOpenHost={openHost} onCreateRule={onCreateRule} />
      </section>
    </div>
  );
}

// ---------- SERVERS ----------
function ServersPage({ openHost }) {
  const D = window.MS_DATA;
  const T = window.ImaraTerms;
  const [q, setQ] = useState("");
  // Opened from the Overview with a filter chosen ("silent", or a
  // protection filter such as "notOn").
  const opened = ServersPage.openWith;
  const [fresh, setFresh] = useState(() => (["live", "stale", "silent"].includes(opened) ? opened : "all"));
  // Opened from the Overview with a protection filter set.
  const [prot, setProt] = useState(() => { const v = ["on", "notOn"].includes(opened) ? opened : "any"; ServersPage.openWith = null; return v; });
  const [sort, setSort] = useState({ key: "hostname", dir: 1 });
  const FILTERS = [["all", "All"], ["live", "Online"], ["stale", "Delayed"], ["silent", "Offline"]];
  const PROT_FILTERS = [["any", "Any"], ["on", "Default deny on"], ["notOn", "Off or not confirmed"]];
  const minute = Math.floor(T.serverNow() / 60000);
  const protOf = useMemo(() => (prot === "any" ? null : Object.fromEntries(D.SERVERS.map((s) => [s.agent_id, T.protectionNow(s, D).state]))), [prot, D.SERVERS, D.INTENTS, D.GROUPS, D.FW_VERSION, minute]);

  const filtered = D.SERVERS.filter((s) => {
    if (fresh !== "all" && s.fresh !== fresh) return false;
    if (protOf && (prot === "on" ? protOf[s.agent_id] !== "on" : protOf[s.agent_id] === "on")) return false;
    if (!q) return true;
    const hay = (s.hostname + " " + Object.entries(s.labels).map(([k, v]) => T.labelText(k, v)).join(" ")).toLowerCase();
    return hay.includes(q.toLowerCase());
  });
  const sorted = [...filtered].sort((a, b) => {
    // Unreported metrics (null) sort below every real value.
    const get = (s) => sort.key === "hostname" ? s.hostname : sort.key === "os" ? s.os_distro : sort.key === "cpu" ? (s.cpu == null ? -1 : s.cpu) : sort.key === "mem" ? (s.mem == null ? -1 : s.mem) : sort.key === "last" ? -s.ageSec : s.hostname;
    const va = get(a), vb = get(b);
    return (va < vb ? -1 : va > vb ? 1 : 0) * sort.dir;
  });
  const pg = usePaged(sorted, 25, [q, fresh, prot, sort.key, sort.dir].join("|"));
  const th = (key, label, align) => (
    <th style={{ textAlign: align, cursor: "pointer", userSelect: "none" }} onClick={() => setSort((s) => ({ key, dir: s.key === key ? -s.dir : 1 }))}>
      <span className="row gap4" style={{ justifyContent: align === "right" ? "flex-end" : "flex-start" }}>{label}{sort.key === key && <Icon name={sort.dir > 0 ? "ChevronUp" : "ChevronDown"} size={12} />}</span>
    </th>
  );
  // What each server says about itself: site and role from its name, and
  // its network (labels set at install are on its page).
  const chipsOf = (s) => T.serverFacts(s);
  const factsHead = T.namesFollowPattern() ? "Site · role · network" : "Labels";

  return (
    <div className="scroll">
      <section className="section">
        <div className="row gap10 spread wrap" style={{ marginBottom: 14 }}>
          <div className="row gap8" style={{ flex: 1, maxWidth: 380, position: "relative", minWidth: 220 }}>
            <Icon name="Search" size={15} style={{ position: "absolute", left: 10, color: "var(--text-faint)" }} />
            <input className="input" style={{ paddingLeft: 32 }} placeholder="Search by name or label…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
          <div className="row gap8 wrap">
            <div className="seg">
              {PROT_FILTERS.map(([f, l]) => <button key={f} className={cx(prot === f && "on")} onClick={() => setProt(f)}>{l}</button>)}
            </div>
            <div className="seg">
              {FILTERS.map(([f, l]) => <button key={f} className={cx(fresh === f && "on")} onClick={() => setFresh(f)}>{l}</button>)}
            </div>
          </div>
        </div>
        <div className="card" style={{ overflow: "hidden" }}>
          <table className="table">
            <thead><tr>
              {th("hostname", "Server", "left")}{th("last", "Agent status", "left")}<th>Default <span style={{ whiteSpace: "nowrap" }}>deny<Help><p>From each server's latest firewall report.</p><p>On: inbound traffic that no rule allows is blocked.</p></Help></span></th><th>{factsHead}</th>
            </tr></thead>
            <tbody>
              {pg.slice.map((s) => {
                const pr = T.protectionNow(s, D);
                const st = pr.state;
                return (
                  <tr key={s.agent_id} className="click" onClick={() => openHost(s)}>
                    <td><div className="mono" style={{ fontWeight: 600, fontSize: 12.5 }}>{s.hostname}</div><div className="mono faint" style={{ fontSize: 10.5 }}>{s.ip}</div></td>
                    <td><Badge tone={s.fresh === "live" ? "ok" : s.fresh === "stale" ? "warn" : "bad"} dot>{T.freshnessText(s.fresh)}</Badge><span className="faint tnum" style={{ fontSize: 11, marginLeft: 8 }}>{agoLong(s.last_seen)}</span></td>
                    <td title={pr.notes.join(" ")}><Badge tone={st === "on" ? "ok" : st === "off" ? "neutral" : "warn"} sq>{T.protectionWord(st)}</Badge></td>
                    <td><div className="row gap6 wrap">{chipsOf(s).map(([k, v]) => <span key={k} className="chip" title={T.labelText(k, v)}>{T.HOSTNAME_PARTS[k] ? String(v).toUpperCase() : T.SUBNET_LABELS[k] ? v : T.labelText(k, v)}</span>)}</div></td>
                  </tr>
                );
              })}
              {pg.total === 0 && <tr><td colSpan={4}><Empty icon="ServerOff" text={D.SERVERS.length ? "No server matches." : "No servers yet. Servers appear here once the agent is installed and enrolled."} /></td></tr>}
            </tbody>
          </table>
        </div>
        <Pager page={pg.page} pageCount={pg.pageCount} total={pg.total} onPage={pg.setPage} size={pg.size} unit="servers" />
      </section>
    </div>
  );
}

window.OverviewPage = OverviewPage;
window.TopologyPage = TopologyPage;
window.ServersPage = ServersPage;