/* fig.01 — the operations console. A site-local figure rather than the design
   system's generic one: every panel is drawn from a system we actually run, so
   the hero reads as our portfolio and not as a stock dashboard. Liveness is
   information only — rows arrive, latency ticks, nothing loops for effect. */
const { TimeSeriesForecast: KTSF } = window.SoftVerxDesignSystem_6fd95b;

const KFEED = [
  { sys: "mdm", src: "feeder 11 · mtr-441", event: "Interval failed validation — held for the metering desk", conf: 0.96 },
  { sys: "vision", src: "line 3 · cam-08", event: "SKU identified, PET clear stream", conf: 0.97 },
  { sys: "agri", src: "house 4 · probe-12", event: "Irrigation setpoint applied, within grower bounds", conf: 0.93 },
  { sys: "iot", src: "fleet · ac-2210", event: "Compressor alarm acknowledged in 42s", conf: 0.95 },
  { sys: "docs", src: "batch 41 · p118", event: "14 fields extracted, one below threshold", conf: 0.98 },
  { sys: "agent", src: "ap run 2,318", event: "Three-way match clean, queued for posting", conf: 0.91 },
  { sys: "cis", src: "circle 3 · c-88142", event: "Routed to lineman, clock started", conf: 0.89 },
  { sys: "ml", src: "demand model", event: "Forecast refreshed, MAPE 4.1% on holdout", conf: 0.94 },
];
const KSTAGES = [
  { l: "sense", v: "41.2k", u: "readings / hr", f: 1 },
  { l: "stream", v: "41.2k", u: "messages / hr", f: 1 },
  { l: "store", v: "41.2k", u: "rows written", f: 1 },
  { l: "model", v: "6.8k", u: "inferences / hr", f: 0.42 },
  { l: "act", v: "1.9k", u: "commands + records", f: 0.24 },
  { l: "review", v: "212", u: "to a person / day", f: 0.08 },
];
const KQUEUE = [
  { l: "held meter reads", v: "0.9%", f: 0.09, who: "metering desk" },
  { l: "fields below threshold", v: "3.1%", f: 0.31, who: "billing clerk" },
  { l: "contested items on the line", v: "2.4%", f: 0.24, who: "line operator" },
  { l: "invoices short of a match", v: "6.0%", f: 0.6, who: "finance" },
];
const KTONE = { mdm: "var(--sx-accent)", vision: "var(--sx-signal)", agri: "var(--sx-field)", iot: "var(--sx-accent)", docs: "var(--sx-signal)", agent: "var(--sx-accent)", cis: "var(--text-quiet)", ml: "var(--sx-field)" };

function KPanel({ title, aside, children, style }) {
  return (
    <div style={{ background: "var(--surface-card)", padding: "var(--sp-5)", ...style }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "var(--sp-3)", flexWrap: "wrap" }}>
        <p className="sx-small" style={{ color: "var(--text-strong)" }}>{title}</p>
        {aside}
      </div>
      {children}
    </div>
  );
}

function OperationsConsole({ mobile }) {
  const [rows, setRows] = React.useState(KFEED.slice(0, 5));
  const [latency, setLatency] = React.useState(38);
  const cursor = React.useRef(5);
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const feed = setInterval(() => setRows((r) => { const next = KFEED[cursor.current % KFEED.length]; cursor.current += 1; return [next, ...r.filter((x) => x.src !== next.src)].slice(0, 5); }), 3200);
    const tick = setInterval(() => setLatency(34 + Math.round(Math.random() * 9)), 1900);
    return () => { clearInterval(feed); clearInterval(tick); };
  }, []);
  const kpis = [
    { label: "consumers billed", value: "7.5M", delta: mobile ? "lesco" : "lesco meter-to-cash" },
    { label: mobile ? "meters managed" : "meters under management", value: "10k+", delta: mobile ? "scales to 10M" : "schema scales to 10M" },
    { label: mobile ? "bills / month" : "bills read monthly", value: "100k+", delta: mobile ? "alberta" : "alberta municipal estate" },
    { label: "inference p95", value: latency + "ms", delta: mobile ? "edge + cloud" : "edge and cloud combined" },
  ];
  const line = { border: "1px solid var(--border-default)" };
  return (
    <div role="img" aria-label="Illustration of the SoftVerx operations console: portfolio counters, a demand forecast, a live event feed across metering, vision, agriculture, device fleets and document work, pipeline throughput and the exception queues that reach a person"
      style={{ overflow: "hidden", borderRadius: "var(--r-card)", background: "var(--surface-card)", boxShadow: "var(--shadow-float)", ...line }}>
      <div style={{ display: "flex", alignItems: "center", gap: "var(--sp-3)", padding: "12px 16px", borderBottom: "1px solid var(--border-default)", background: "var(--surface-raised)", flexWrap: "wrap" }}>
        <span aria-hidden style={{ display: "flex", gap: 6 }}>{[0, 1, 2].map((i) => <span key={i} style={{ width: 9, height: 9, borderRadius: 999, background: "var(--border-strong)" }} />)}</span>
        <span className="sx-caption" style={{ color: "var(--text-quiet)" }}>softverx / operations</span>
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 7, padding: "4px 10px", borderRadius: "var(--r-pill)", border: "1px solid var(--sx-accent-line)", background: "var(--sx-accent-soft)" }}>
          <span style={{ position: "relative", display: "inline-flex", width: 6, height: 6 }}>
            <span aria-hidden style={{ position: "absolute", inset: 0, borderRadius: 999, background: "var(--sx-accent)", animation: "sx-pulse 2.2s var(--e-soft) infinite" }} />
            <span style={{ position: "relative", width: 6, height: 6, borderRadius: 999, background: "var(--sx-accent)" }} />
          </span>
          <span className="sx-caption" style={{ color: "var(--sx-accent)" }}>live</span>
        </span>
      </div>

      <div style={{ display: "grid", gap: 1, gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, minmax(0,1fr))", background: "var(--border-default)" }}>
        {kpis.map((k) => (
          <div key={k.label} style={{ background: "var(--surface-card)", padding: mobile ? "12px 14px" : "var(--sp-4) var(--sp-5)" }}>
            <p className="sx-caption" style={{ color: "var(--text-quiet)" }}>{k.label}</p>
            <p className="sx-h3 sx-num" style={{ marginTop: mobile ? 4 : 8, fontFamily: "var(--font-display)", fontSize: mobile ? "1.35rem" : undefined }}>{k.value}</p>
            <p className="sx-caption" style={{ marginTop: 4, color: "var(--sx-field)", textTransform: "none" }}>{k.delta}</p>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gap: 1, gridTemplateColumns: mobile ? "1fr" : "minmax(0,6fr) minmax(0,5fr)", background: "var(--border-default)" }}>
        <KPanel title="Feeder demand, next 24 hours"
          aside={<div style={{ display: "flex", gap: "var(--sp-4)" }}>
            <span className="sx-caption" style={{ color: "var(--text-quiet)", display: "inline-flex", alignItems: "center", gap: 6 }}><span aria-hidden style={{ width: 14, borderTop: "2px solid var(--sx-accent)" }} />actual</span>
            <span className="sx-caption" style={{ color: "var(--text-quiet)", display: "inline-flex", alignItems: "center", gap: 6 }}><span aria-hidden style={{ width: 14, borderTop: "2px dashed var(--sx-signal)" }} />forecast</span>
            <span className="sx-caption" style={{ color: "var(--text-quiet)" }}>· sample</span>
          </div>}>
          <KTSF height={mobile ? 116 : 150} style={{ marginTop: "var(--sp-4)" }} />
          <p className="sx-caption" style={{ marginTop: 12, color: "var(--text-quiet)", textTransform: "none" }}>{mobile ? "Band is the 80% interval, scored against what arrived." : "Band is the 80% interval. The forecast is scored against what arrived, and the error report ships with it."}</p>
        </KPanel>
        <KPanel title="Across the estate" aside={<span className="sx-caption" style={{ color: "var(--text-quiet)" }}>last {mobile ? 4 : 5} events</span>}>
          <ul style={{ listStyle: "none", margin: "var(--sp-4) 0 0", padding: 0, display: "grid", gap: 14 }}>
            {(mobile ? rows.slice(0, 4) : rows).map((d, i) => (
              <li key={d.src + i} style={{ animation: i === 0 ? "sx-reveal var(--d-base) var(--e-expo) both" : undefined }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                  <span className="sx-caption sx-num" style={{ color: KTONE[d.sys], minWidth: 46 }}>{d.sys}</span>
                  <span className="sx-caption" style={{ color: "var(--text-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.src}</span>
                  <span className="sx-caption sx-num" style={{ marginLeft: "auto", color: "var(--text-quiet)" }}>{d.conf.toFixed(2)}</span>
                </div>
                <p className="sx-caption" style={{ marginTop: 4, color: "var(--text-strong)", textTransform: "none" }}>{d.event}</p>
                <div style={{ height: 3, marginTop: 7, background: "var(--surface-raised)", borderRadius: 999, overflow: "hidden" }}>
                  <span aria-hidden style={{ display: "block", height: "100%", width: `${d.conf * 100}%`, background: KTONE[d.sys], transition: "width var(--d-slow) var(--e-expo)" }} />
                </div>
              </li>
            ))}
          </ul>
        </KPanel>
      </div>

      {!mobile && <div style={{ display: "grid", gap: 1, gridTemplateColumns: mobile ? "1fr" : "minmax(0,6fr) minmax(0,5fr)", background: "var(--border-default)", borderTop: "1px solid var(--border-default)" }}>
        <KPanel title="One hour through the pipeline" aside={<span className="sx-caption" style={{ color: "var(--text-quiet)" }}>{mobile ? "magnitudes" : "representative magnitudes"}</span>}>
          <div style={{ marginTop: mobile ? 12 : "var(--sp-4)", display: "grid", gap: mobile ? 8 : 10 }}>
            {KSTAGES.map((s) => (
              <div key={s.l} style={{ display: "grid", gridTemplateColumns: mobile ? "58px 1fr 62px" : "62px 1fr 148px", gap: mobile ? 8 : 12, alignItems: "center" }}>
                <span className="sx-caption" style={{ color: "var(--text-body)" }}>{s.l}</span>
                <span style={{ height: 8, background: "var(--surface-raised)", borderRadius: 2, overflow: "hidden" }}>
                  <span aria-hidden style={{ display: "block", height: "100%", width: `${Math.max(s.f * 100, 2)}%`, background: s.f < 0.15 ? "var(--sx-signal)" : "var(--sx-accent)", opacity: s.f < 0.5 ? 0.85 : 1 }} />
                </span>
                <span className="sx-caption" style={{ color: "var(--text-quiet)", textTransform: "none", textAlign: mobile ? "right" : "left" }}><span className="sx-num" style={{ color: "var(--text-strong)" }}>{s.v}</span>{mobile ? "" : " " + s.u}</span>
              </div>
            ))}
          </div>
          <p className="sx-caption" style={{ marginTop: mobile ? 11 : 14, color: "var(--text-quiet)", textTransform: "none" }}>{mobile ? "Cheap stages answer most of the volume; a person is only asked at the end." : "The narrowing is the design. Cheap stages answer most of the volume; the expensive model is only asked when they cannot, and a person is only asked at the end."}</p>
          {mobile && (
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--border-default)", display: "grid", gap: 7 }}>
              <p className="sx-caption" style={{ color: "var(--text-quiet)" }}>what reaches a person</p>
              {KQUEUE.map((q) => (
                <div key={q.l} style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                  <span className="sx-caption" style={{ color: "var(--text-strong)", textTransform: "none" }}>{q.l}</span>
                  <span className="sx-caption" style={{ color: "var(--text-quiet)", textTransform: "none" }}>{q.who}</span>
                  <span className="sx-caption sx-num" style={{ marginLeft: "auto", color: "var(--text-accent)" }}>{q.v}</span>
                </div>
              ))}
            </div>
          )}
        </KPanel>
        {!mobile && <KPanel title="What reaches a person" aside={<span className="sx-caption" style={{ color: "var(--text-quiet)" }}>share of volume</span>}>
          <ul style={{ listStyle: "none", margin: "var(--sp-4) 0 0", padding: 0, display: "grid", gap: 13 }}>
            {KQUEUE.map((q) => (
              <li key={q.l}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                  <span className="sx-caption" style={{ color: "var(--text-strong)", textTransform: "none" }}>{q.l}</span>
                  <span className="sx-caption sx-num" style={{ marginLeft: "auto", color: "var(--text-accent)" }}>{q.v}</span>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
                  <span style={{ flex: 1, height: 6, background: "var(--surface-raised)", borderRadius: 999, overflow: "hidden" }}>
                    <span aria-hidden style={{ display: "block", height: "100%", width: `${q.f * 100}%`, background: "var(--sx-signal)" }} />
                  </span>
                  <span className="sx-caption" style={{ color: "var(--text-quiet)", textTransform: "none", minWidth: mobile ? 0 : 96, textAlign: "right" }}>{q.who}</span>
                </div>
              </li>
            ))}
          </ul>
          <p className="sx-caption" style={{ marginTop: 14, color: "var(--text-quiet)", textTransform: "none" }}>Every system here has a stop. Below threshold it hands over with the evidence attached rather than guessing.</p>
        </KPanel>}
      </div>}

      <p className="sx-caption" style={{ padding: mobile ? "9px 14px" : "10px var(--sp-5)", borderTop: "1px solid var(--border-default)", color: "var(--text-quiet)", textTransform: "none" }}>{mobile ? "Representative interface. Magnitudes are ours; no client data is shown." : "Representative interface, drawn from the systems described on this site. Magnitudes are ours; no client data is shown."}</p>
    </div>
  );
}
Object.assign(window, { OperationsConsole });