/* global React */
/**
 * OrbSummary — Live Guardian Orb platform widget (M2 data wiring)
 * GET /api/v1/health/orb-summary  (unauthenticated platform aggregate)
 * DATA_CONTRACTS: guardian-orb.json
 */
const { useState, useEffect } = React;
const API = "https://api.conceptualhealth.com/api/v1/health/orb-summary";
const REFRESH_MS = 60 * 1000;

const DEMO = { state: { color: "#7c6dfa", composite_score: 76.4, trend: "up" }, axes: [{ axis: "PO", score: 7.8 }, { axis: "NM", score: 6.9 }, { axis: "ER", score: 8.1 }, { axis: "SC", score: 7.2 }, { axis: "RS", score: 6.5 }, { axis: "ES", score: 7.9 }, { axis: "TA", score: 8.4 }, { axis: "PV", score: 7.1 }], journal_entries_7d: 142, nutrition_entries_today: 387 };

const AXIS_COLORS = { PO: "#ef4444", NM: "#8b5cf6", ER: "#f97316", SC: "#10b981", RS: "#6366f1", ES: "#06b6d4", TA: "#f59e0b", PV: "#ec4899" };

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

  const fetch_ = () =>
    fetch(API).then(r => r.ok ? r.json() : null).then(j => { if (j) { setData(j); setLive(true); } else { setData(DEMO); setLive(false); } }).catch(() => { setData(DEMO); setLive(false); });

  useEffect(() => { fetch_(); const id = setInterval(fetch_, REFRESH_MS); return () => clearInterval(id); }, []);
  if (!data) 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 state = data.state || {};
  const axes = data.axes || [];

  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" }}>Guardian Orb · platform pulse</div>
        <div style={badge}><span style={{ width: 5, height: 5, borderRadius: "50%", background: live ? "#10b981" : "#9ca3af", display: "inline-block" }} />{live ? "LIVE" : "DEMO"}</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
        {/* Orb state */}
        <div style={{ background: "var(--bg-steel,#111418)", border: "1px solid var(--border-1-dark,#232830)", borderRadius: 10, padding: "16px 20px" }}>
          <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>Platform composite score</div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: "50%", background: typeof state.color === "string" && state.color.startsWith("#") ? state.color : "var(--accent-halo,#7c6dfa)", boxShadow: `0 0 20px ${typeof state.color === "string" && state.color.startsWith("#") ? state.color : "#7c6dfa"}40` }} />
            <div>
              <div style={{ fontSize: 32, fontWeight: 700, fontFamily: "var(--font-display,sans-serif)", color: "var(--fg-1,#f2f4f7)", lineHeight: 1 }}>{Math.round(state.composite_score || 0)}</div>
              <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3)", marginTop: 4 }}>trend: {state.trend || "flat"}</div>
            </div>
          </div>
        </div>

        {/* Activity */}
        <div style={{ background: "var(--bg-steel,#111418)", border: "1px solid var(--border-1-dark,#232830)", borderRadius: 10, padding: "16px 20px", display: "flex", flexDirection: "column", gap: 10 }}>
          <div>
            <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4 }}>Journal entries (7d)</div>
            <div style={{ fontSize: 24, fontWeight: 700, color: "var(--fg-1,#f2f4f7)", fontFamily: "var(--font-display,sans-serif)" }}>{(data.journal_entries_7d || 0).toLocaleString()}</div>
          </div>
          <div>
            <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4 }}>Nutrition logs today</div>
            <div style={{ fontSize: 24, fontWeight: 700, color: "var(--fg-1,#f2f4f7)", fontFamily: "var(--font-display,sans-serif)" }}>{(data.nutrition_entries_today || 0).toLocaleString()}</div>
          </div>
        </div>
      </div>

      {/* 8-axis mini grid */}
      {axes.length > 0 && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 6 }}>
          {axes.map(a => (
            <div key={a.axis} style={{ background: "var(--bg-steel,#111418)", border: "1px solid var(--border-1-dark,#232830)", borderRadius: 8, padding: "10px 8px", textAlign: "center" }}>
              <div style={{ fontSize: 9, fontFamily: "var(--font-mono,monospace)", color: AXIS_COLORS[a.axis] || "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4 }}>{a.axis}</div>
              <div style={{ fontSize: 18, fontWeight: 700, color: "var(--fg-1,#f2f4f7)", fontFamily: "var(--font-display,sans-serif)" }}>{a.score != null ? a.score.toFixed(1) : "—"}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
window.OrbSummary = OrbSummary;