/* global React, ReactDOM */
/* ============================================================================
   recovery/wow/RecoverySummary.jsx  —  M2 live-data widget
   Fetches GET /api/v1/public/recovery/summary · unauthenticated · 30s refresh
   Exports window.RecoveryLive = { RecoverySummary }
   ============================================================================ */
(function () {
  "use strict";
  const { useState, useEffect } = React;
  const API    = "/api/v1";
  const ACCENT = "#B23A2E";   /* alert red — DR is always high stakes */

  function statusColor(incidents_open) {
    if (incidents_open > 0) return "#B23A2E";
    return "#4A7C59";
  }

  function Tile({ label, value, live, alert }) {
    const color = alert ? "#B23A2E" : ACCENT;
    return (
      <div style={{
        display: "flex", flexDirection: "column", gap: 2,
        padding: "10px 16px", background: alert ? "#B23A2E0D" : "#F5F5F3",
        borderRadius: 6, border: "1px solid " + (alert ? "#B23A2E33" : "#E0DAD0"), minWidth: 130,
      }}>
        <span style={{ fontSize: 9, color: "#888", textTransform: "uppercase", letterSpacing: 0.6 }}>{label}</span>
        <span style={{ fontSize: 20, fontWeight: 700, fontFamily: "'SF Mono', monospace", color: live ? color : "#ccc" }}>{live ? value : "—"}</span>
      </div>
    );
  }

  function RecoverySummaryWidget() {
    const [data, setData] = useState(null);
    const [live, setLive] = useState(false);
    const [ts, setTs]     = useState(null);

    useEffect(() => {
      let cancelled = false;
      async function poll() {
        try {
          const r = await fetch(API + "/public/recovery/summary");
          if (!r.ok) { if (!cancelled) { setLive(false); setData(null); } return; }
          const d = await r.json();
          if (!cancelled) { setData(d); setLive(true); setTs(new Date()); }
        } catch (_) { if (!cancelled) { setLive(false); setData(null); } }
      }
      poll();
      const id = setInterval(poll, 30000);
      return () => { cancelled = true; clearInterval(id); };
    }, []);

    const allClear = live && data && data.incidents_open === 0;
    const borderColor = allClear ? "#4A7C5930" : "#B23A2E44";
    const bgColor     = allClear ? "#F5FAF7"   : "#FFF8F7";

    return (
      <div style={{ margin: "0 0 16px 0", padding: "12px 18px", background: bgColor, borderRadius: 8, border: "1.5px solid " + borderColor }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <span style={{ padding: "2px 7px", borderRadius: 3, fontSize: 9, fontWeight: 700, letterSpacing: 0.8, background: live ? (allClear ? "#4A7C59" : "#B23A2E") : "#999", color: "#fff" }}>
            {live ? (allClear ? "● ALL CLEAR" : "⚠ INCIDENTS") : "◌ DEMO"}
          </span>
          <span style={{ fontSize: 11, fontWeight: 600, color: allClear ? "#4A7C59" : "#B23A2E" }}>DR / RECOVERY LIVE DATA</span>
          {ts && <span style={{ marginLeft: "auto", fontSize: 9, color: "#aaa", fontFamily: "'SF Mono', monospace" }}>{ts.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}</span>}
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <Tile label="Incidents Open"     value={data?.incidents_open}            live={live} alert={live && data?.incidents_open > 0} />
          <Tile label="P1 Open"            value={data?.incidents_p1_open}         live={live} alert={live && data?.incidents_p1_open > 0} />
          <Tile label="Uptime MTD"         value={live && data ? data.uptime_month_pct.toFixed(2) + "%" : "—"} live={live} />
          <Tile label="Snapshot Age (h)"   value={live && data?.snapshots_latest_age_hours != null ? data.snapshots_latest_age_hours.toFixed(1) : "—"} live={live} />
          <Tile label="Runbooks Active"    value={data?.runbooks_active}           live={live} />
        </div>
      </div>
    );
  }

  window.RecoveryLive = { RecoverySummary: RecoverySummaryWidget };
  /* ---- self-mount before #root ------------------------------------------- */
  function mountWidget() {
    const root = document.getElementById("root");
    if (!root) return;
    const el = document.createElement("div");
    el.id = "recovery-live-root";
    root.before(el);
    ReactDOM.createRoot(el).render(React.createElement(RecoverySummaryWidget));
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", mountWidget);
  } else {
    mountWidget();
  }
})();