// System status + SLA — turns the incumbents' "billed through the outage,
// no communication" grievance into a trust signal.

function StatusDot({ status }) {
  const color = status === "operational" ? "var(--accent)" : status === "action-needed" || status === "degraded" ? "var(--warn)" : status === "down" ? "var(--danger)" : "var(--text-3)";
  return <span className="ai-mode-dot" style={{ background: color }} />;
}

function StatusPage() {
  const hub = window.useClearCast();
  const [state, setState] = React.useState({ loading: true });

  React.useEffect(() => {
    let alive = true;
    ClearCastAPI.systemStatus().then((d) => { if (alive) setState({ loading: false, data: d }); }).catch((e) => { if (alive) setState({ loading: false, error: e.message }); });
    return () => { alive = false; };
  }, []);

  if (state.loading) return <div className="page"><div className="card" style={{ padding: 24 }}>Loading status…</div></div>;
  if (state.error) return <div className="page"><div className="card" style={{ padding: 24 }}>{state.error}</div></div>;
  const s = state.data;
  const operational = s.overall === "operational";

  return (
    <div className="page status-page" style={{ maxWidth: 720, margin: "0 auto" }}>
      <div className="card" style={{ padding: 20, marginBottom: 16, borderColor: operational ? "rgba(20,184,138,0.4)" : "rgba(245,158,11,0.4)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <StatusDot status={s.overall} />
          <div style={{ fontSize: 17, fontWeight: 700 }}>{s.overallNote}</div>
        </div>
        <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>Updated {new Date(s.updatedAt).toLocaleString()}</div>
      </div>

      <div className="card" style={{ padding: 20, marginBottom: 16, background: "var(--accent-softer)", borderColor: "rgba(20,184,138,0.25)" }}>
        <div style={{ fontWeight: 700, marginBottom: 4 }}>Our uptime promise · {s.sla.uptimeTarget}</div>
        <div className="muted" style={{ fontSize: 13, lineHeight: 1.55 }}>{s.sla.policy}</div>
      </div>

      <div style={{ fontSize: 13.5, color: "var(--text-2)", fontWeight: 600, margin: "0 0 10px 2px" }}>Components</div>
      <div className="card" style={{ padding: 8, marginBottom: 16 }}>
        {s.components.map((c) => (
          <div key={c.name} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderBottom: "1px solid var(--border)" }}>
            <StatusDot status={c.status} />
            <b style={{ fontSize: 13.5, flex: 1 }}>{c.name}</b>
            {c.note && <span className="muted" style={{ fontSize: 11.5 }}>{c.note}</span>}
            <span style={{ fontSize: 12, color: c.status === "operational" ? "var(--accent-2)" : "var(--warn)", textTransform: "capitalize" }}>{c.status}</span>
          </div>
        ))}
      </div>

      {(s.channelHealth || []).some((c) => c.level !== "ok") && (
        <div className="card" style={{ padding: 16, marginBottom: 16 }}>
          <div style={{ fontWeight: 650, fontSize: 13.5, marginBottom: 8 }}>Your channel connections</div>
          {(s.channelHealth || []).filter((c) => c.level !== "ok").map((c) => (
            <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, padding: "4px 0" }}>
              <StatusDot status={c.level === "critical" ? "down" : "degraded"} />
              <b>{c.name}</b>
              <span className="muted">{c.reasons[0]}</span>
              <button className="btn btn-sm" style={{ marginLeft: "auto", padding: "2px 8px" }} onClick={() => hub.setPage("integrations")}>Reconnect</button>
            </div>
          ))}
        </div>
      )}

      <div style={{ fontSize: 13.5, color: "var(--text-2)", fontWeight: 600, margin: "0 0 10px 2px" }}>Incident history</div>
      <div className="card" style={{ padding: 16 }}>
        {(s.incidents || []).length === 0 && <div className="muted" style={{ fontSize: 13 }}>No incidents recorded.</div>}
        {(s.incidents || []).map((inc) => (
          <div key={inc.id} style={{ paddingBottom: 12, marginBottom: 12, borderBottom: "1px solid var(--border)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span className={`pill ${inc.status === "resolved" ? "ok" : "warn"}`} style={{ padding: "2px 8px", fontSize: 10.5, textTransform: "capitalize" }}>{inc.status}</span>
              <b style={{ fontSize: 13.5 }}>{inc.title}</b>
              {inc.serviceCreditUsd > 0 && <span className="pill ok" style={{ padding: "2px 8px", fontSize: 10.5, marginLeft: "auto" }}>${inc.serviceCreditUsd} credit applied</span>}
            </div>
            <div style={{ marginTop: 8, display: "grid", gap: 5 }}>
              {(inc.updates || []).map((u, i) => (
                <div key={i} className="muted" style={{ fontSize: 12 }}>
                  <span style={{ color: "var(--text-3)" }}>{new Date(u.at).toLocaleString()}</span> — {u.text}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.StatusPage = StatusPage;