/* global React */
/**
 * ExchangeSummary — Live HC Exchange ticker widget (M2 data wiring)
 * GET /api/v1/public/exchange/tickers  (unauthenticated)
 * GET /api/v1/public/exchange/custody/reserves  (unauthenticated)
 * DATA_CONTRACTS: hc-exchange.json
 */

const { useState, useEffect } = React;
const API_TICKERS  = "https://api.conceptualhealth.com/api/v1/public/exchange/tickers";
const API_RESERVES = "https://api.conceptualhealth.com/api/v1/public/exchange/custody/reserves";
const REFRESH_MS   = 15 * 1000;

const DEMO_TICKERS = [];
const DEMO_RESERVES = [];

function ExchangeSummary() {
  const [tickers, setTickers]   = useState([]);
  const [reserves, setReserves] = useState([]);
  const [live, setLive]         = useState(false);

  const fetch_ = () => {
    Promise.all([
      fetch(API_TICKERS).then(r => r.ok ? r.json() : null).catch(() => null),
      fetch(API_RESERVES).then(r => r.ok ? r.json() : null).catch(() => null),
    ]).then(([t, r]) => {
      if (t && t.length) { setTickers(t); setLive(true); } else { setTickers(DEMO_TICKERS); setLive(false); }
      if (r && r.length) setReserves(r); else setReserves(DEMO_RESERVES);
    });
  };

  useEffect(() => { fetch_(); const id = setInterval(fetch_, REFRESH_MS); return () => clearInterval(id); }, []);
  if (!tickers.length) return null;

  const badge = { display: "inline-flex", alignItems: "center", gap: 5, fontSize: 9, fontFamily: "var(--font-mono,monospace)", padding: "3px 9px", borderRadius: 20, background: live ? "rgba(16,185,129,0.12)" : "rgba(156,163,175,0.12)", color: live ? "#10b981" : "#9ca3af", border: live ? "1px solid rgba(16,185,129,0.25)" : "1px solid rgba(156,163,175,0.2)" };
  const mono = { fontFamily: "var(--font-mono,monospace)", fontSize: 12 };

  const fmt = (n, d=4) => n != null ? Number(n).toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d }) : "—";
  const fmtVol = n => n != null ? (n >= 1e6 ? `$${(n/1e6).toFixed(2)}M` : `$${Math.round(n).toLocaleString()}`) : "—";

  return (
    <div style={{ padding: "0 0 20px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.09em" }}>HC Exchange · market data</div>
        <div style={badge}><span style={{ width: 5, height: 5, borderRadius: "50%", background: live ? "#10b981" : "#9ca3af", display: "inline-block" }} />{live ? "LIVE" : "DEMO"}</div>
      </div>

      {/* Ticker table */}
      <div style={{ background: "var(--bg-steel,#111418)", border: "1px solid var(--border-1-dark,#232830)", borderRadius: 10, overflow: "hidden", marginBottom: 14 }}>
        <div style={{ display: "grid", gridTemplateColumns: "100px 1fr 1fr 1fr 1fr", padding: "8px 16px", borderBottom: "1px solid var(--border-1-dark,#232830)" }}>
          {["Pair","Last","Bid","Ask","24h Vol"].map(h => (
            <div key={h} style={{ ...mono, color: "var(--fg-3,#6b7280)", textTransform: "uppercase", letterSpacing: "0.06em", fontSize: 10 }}>{h}</div>
          ))}
        </div>
        {tickers.slice(0, 6).map((t, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 1fr 1fr 1fr", padding: "10px 16px", borderBottom: i < tickers.length - 1 ? "1px solid var(--border-1-dark,#232830)" : "none" }}>
            <div style={{ ...mono, color: "var(--accent-halo,#7c6dfa)", fontWeight: 600 }}>{t.pair}</div>
            <div style={{ ...mono, color: "var(--fg-1,#f2f4f7)" }}>{fmt(t.last)}</div>
            <div style={{ ...mono, color: "var(--fg-2,#9ca3af)" }}>{fmt(t.bid)}</div>
            <div style={{ ...mono, color: "var(--fg-2,#9ca3af)" }}>{fmt(t.ask)}</div>
            <div style={{ ...mono, color: "var(--fg-2,#9ca3af)" }}>{fmtVol(t.volume_24h)}</div>
          </div>
        ))}
      </div>

      {/* Proof of reserves */}
      {reserves.length > 0 && (
        <div style={{ background: "var(--bg-steel,#111418)", border: "1px solid var(--border-1-dark,#232830)", borderRadius: 10, overflow: "hidden" }}>
          <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--border-1-dark,#232830)", display: "flex", alignItems: "center", gap: 8 }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 2L3 7v5c0 5.25 3.75 10.15 9 11.35C17.25 22.15 21 17.25 21 12V7L12 2z" stroke="#10b981" strokeWidth="1.5"/></svg>
            <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-2,#9ca3af)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Proof of reserves</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "80px 1fr 1fr 1fr", padding: "8px 16px", borderBottom: "1px solid var(--border-1-dark,#232830)" }}>
            {["Asset","On-chain","Liabilities","Ratio"].map(h => (
              <div key={h} style={{ ...mono, color: "var(--fg-3,#6b7280)", textTransform: "uppercase", letterSpacing: "0.06em", fontSize: 10 }}>{h}</div>
            ))}
          </div>
          {reserves.map((r, i) => {
            const ratio = r.on_chain && r.liabilities ? (r.on_chain / r.liabilities) : null;
            const ratioColor = ratio == null ? "var(--fg-2)" : ratio >= 1.02 ? "#10b981" : ratio >= 1.0 ? "#fbbf24" : "#ef4444";
            return (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "80px 1fr 1fr 1fr", padding: "10px 16px", borderBottom: i < reserves.length - 1 ? "1px solid var(--border-1-dark,#232830)" : "none" }}>
                <div style={{ ...mono, color: "var(--accent-halo,#7c6dfa)", fontWeight: 600 }}>{r.asset}</div>
                <div style={{ ...mono, color: "var(--fg-1,#f2f4f7)" }}>{r.on_chain != null ? `${(r.on_chain/1e6).toFixed(2)}M` : "—"}</div>
                <div style={{ ...mono, color: "var(--fg-2,#9ca3af)" }}>{r.liabilities != null ? `${(r.liabilities/1e6).toFixed(2)}M` : "—"}</div>
                <div style={{ ...mono, color: ratioColor }}>{ratio != null ? `${(ratio*100).toFixed(1)}%` : "—"}</div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}
window.ExchangeSummary = ExchangeSummary;