/* global React, ReactDOM */
/* ============================================================================
   social/wow/SocialSummary.jsx  —  M2 live-data widget
   Fetches GET /api/v1/public/social/summary · unauthenticated · 60s refresh
   Exports window.SocialLive = { SocialSummary }
   ============================================================================ */
(function () {
  "use strict";
  const { useState, useEffect } = React;
  const API    = "/api/v1";
  const ACCENT = "#4A7C59";

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

  function SocialSummaryWidget() {
    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/social/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, 60000);
      return () => { cancelled = true; clearInterval(id); };
    }, []);

    return (
      <div style={{ margin: "0 0 16px 0", padding: "12px 18px", background: "#FAFAF8", borderRadius: 8, border: "1.5px solid " + ACCENT + "28" }}>
        <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 ? ACCENT : "#999", color: "#fff" }}>{live ? "● LIVE" : "◌ DEMO"}</span>
          <span style={{ fontSize: 11, fontWeight: 600, color: ACCENT }}>SOCIAL 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="Challenges Active"  value={data?.challenges_active}        live={live} />
          <Tile label="Messages 24h"       value={data?.messages_sent_24h}        live={live} />
          <Tile label="Notif Queue"        value={data?.notifications_queue_depth} live={live} />
          <Tile label="Notif Failures 24h" value={data?.notifications_failures_24h} live={live} />
          <Tile label="Broadcasts Active"  value={data?.broadcasts_active}        live={live} />
        </div>
      </div>
    );
  }

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