/* global React, ReactDOM */
/* ============================================================================
   coin-healthcare/wow/CoinHealthcareSummary.jsx  —  M2 live-data widget for HCC
   Fetches GET /api/v1/public/coin-healthcare/summary · unauthenticated · 30s
   Exports window.HCCLive = { HCCSummary }
   ============================================================================ */
(function () {
  "use strict";
  const { useState, useEffect } = React;
  const API    = "/api/v1";
  const ACCENT = "#117A4D";

  function fmtHCC(v) {
    if (v == null) return "—";
    if (v >= 1000000) return (v / 1000000).toFixed(2) + "M HCC";
    if (v >= 1000)    return (v / 1000).toFixed(1) + "K HCC";
    return v.toFixed(2) + " HCC";
  }

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

  function HCCSummaryWidget() {
    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/coin-healthcare/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); };
    }, []);

    return (
      <div style={{ margin: "0 0 16px 0", padding: "12px 18px", background: "#F5FAF7", borderRadius: 8, border: "1.5px solid " + ACCENT + "30" }}>
        <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 }}>HCC TOKEN 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="Circulating HCC"    value={live && data ? fmtHCC(data.circulating_supply_hcc) : "—"} live={live} />
          <Tile label="Mining Events 24h"  value={data?.mining_events_24h}        live={live} />
          <Tile label="HW Nodes Active"    value={data?.hardware_nodes_active}    live={live} />
          <Tile label="Governance Votes"   value={data?.governance_proposals_open} live={live} />
          <Tile label="Rewards 30d"        value={live && data ? fmtHCC(data.rewards_issued_30d_hcc) : "—"} live={live} />
          <Tile label="Wallets Active"     value={data?.wallets_active}           live={live} />
        </div>
      </div>
    );
  }

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