/* @jsx React.createElement */

/* Status page — manually maintained, real not faked.
   Brand-coherent status discipline:
     · operational  → no marker, quiet listing (silence is the signal)
     · degraded     → amber dot + amber label
     · outage       → amber + line-through + filled-square glyph
   No green/yellow/red. Operational is silence. Problems are amber. */

/* ---------- DATA (manually maintained) ----------
   When something happens, edit this file. Otherwise the page reads quiet.
   `incidents` is empty by design — placeholder incidents would be a brand violation. */

const DEPLOYMENT_DATE = "march 11, 2026";

const SYSTEMS = [
  { id: "tam",        label: "TAM",        slash: "discovery",     state: "operational" },
  { id: "signal",     label: "Signal",     slash: "scoring",       state: "operational" },
  { id: "cascade",    label: "Cascade",    slash: "enrichment",    state: "operational" },
  { id: "delivery",   label: "Delivery",   slash: "infrastructure", state: "operational" },
];

/* Each incident: { id, opened, resolved, systems:[id], severity:'degraded'|'outage', summary, resolution } */
const INCIDENTS = [];

/* ---------- helpers ---------- */
function StateMarker({ state }) {
  if (state === "operational") return null;
  if (state === "degraded") return <span className="state-dot deg" aria-hidden="true" />;
  if (state === "outage")   return <span className="state-glyph out" aria-hidden="true" />;
  return null;
}

function StateLabel({ state }) {
  if (state === "operational") return <span className="state-label op">operational</span>;
  if (state === "degraded")    return <span className="state-label deg">degraded</span>;
  if (state === "outage")      return <span className="state-label out">outage</span>;
  return null;
}

/* Aggregate state of the whole platform. Operational unless any system isn't. */
function platformState(systems) {
  if (systems.some(s => s.state === "outage"))   return "outage";
  if (systems.some(s => s.state === "degraded")) return "degraded";
  return "operational";
}

function lastIncidentLabel(incidents) {
  if (!incidents.length) return "none on record";
  const last = incidents[0];
  return `${last.opened} · ${last.summary}`;
}

/* ---------- main ---------- */
function StatusPage() {
  const overall = platformState(SYSTEMS);
  const overallText = overall === "operational"
    ? "all systems operational"
    : overall === "degraded"
      ? "one or more systems degraded"
      : "active outage";

  return (
    <main className="status-page">
      <div className="wrap">
        {/* Document head — same doctype register as the spec sheet. */}
        <header className="status-head">
          <div>
            <div className="status-doctype">
              status <span className="am">·</span> live
            </div>
            <h1>
              GTM OS <span className="am">/</span><br/>
              system status.
            </h1>
          </div>
          <dl className="status-meta">
            <div className="row"><dt>current</dt><dd>{overallText}</dd></div>
            <div className="row"><dt>last incident</dt><dd>{lastIncidentLabel(INCIDENTS)}</dd></div>
            <div className="row"><dt>operational since</dt><dd>{DEPLOYMENT_DATE}</dd></div>
            <div className="row"><dt>scope</dt><dd>four-system contract</dd></div>
          </dl>
        </header>

        {/* Quiet headline — operational is silence */}
        <section className="status-banner">
          {overall === "operational" ? (
            <p>
              All four systems operational since <span className="am">{DEPLOYMENT_DATE}</span>.
              No incidents on record.
            </p>
          ) : (
            <p>
              <span className="am">·</span> Active condition. See the system grid below
              and incident log for detail.
            </p>
          )}
        </section>

        {/* Four-system grid — primary visual */}
        <section className="status-grid">
          <div className="status-grid-head">
            <div className="grid-eyebrow">systems <span className="am">·</span> 04</div>
            <div className="grid-legend">
              <span className="lg-item"><span className="lg-swatch op" /> operational</span>
              <span className="lg-sep am">·</span>
              <span className="lg-item"><span className="lg-swatch deg" /> degraded</span>
              <span className="lg-sep am">·</span>
              <span className="lg-item"><span className="lg-swatch out" /> outage</span>
            </div>
          </div>
          <ol className="status-systems">
            {SYSTEMS.map((s, i) => (
              <li key={s.id} className={`sys sys-${s.state}`}>
                <span className="sys-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="sys-name">
                  {s.label}<span className="am">/</span>{s.slash}
                </span>
                <span className="sys-state">
                  <StateMarker state={s.state} />
                  <StateLabel state={s.state} />
                </span>
              </li>
            ))}
          </ol>
        </section>

        {/* Incident log */}
        <section className="status-log">
          <div className="log-head">
            <div className="log-eyebrow">incident log <span className="am">·</span> {INCIDENTS.length}</div>
            <div className="log-meta">most recent first</div>
          </div>

          {INCIDENTS.length === 0 ? (
            <div className="log-empty">
              <p>
                Nothing on record. Operational since <span className="am">{DEPLOYMENT_DATE}</span>.
              </p>
              <p className="log-empty-note">
                Incidents are posted by hand when they happen, with a timestamp,
                affected system, and resolution time. We do not pre-populate this
                log to make the page look busy.
              </p>
            </div>
          ) : (
            <ol className="log-list">
              {INCIDENTS.map(inc => (
                <li key={inc.id} className={`log-row sev-${inc.severity}`}>
                  <div className="log-stamp">
                    <span className="log-opened">{inc.opened}</span>
                    {inc.resolved && (
                      <span className="log-resolved">resolved <span className="am">·</span> {inc.resolved}</span>
                    )}
                  </div>
                  <div className="log-body">
                    <div className="log-row-head">
                      <span className={`log-sev sev-${inc.severity}`}>
                        {inc.severity === "outage" && <span className="state-glyph out" />}
                        {inc.severity === "degraded" && <span className="state-dot deg" />}
                        {inc.severity}
                      </span>
                      <span className="log-systems">
                        {inc.systems.map((sid, i) => {
                          const s = SYSTEMS.find(x => x.id === sid);
                          return (
                            <React.Fragment key={sid}>
                              {i > 0 && <span className="am">·</span>}
                              <span className="log-system">{s ? s.label : sid}</span>
                            </React.Fragment>
                          );
                        })}
                      </span>
                    </div>
                    <p className="log-summary">{inc.summary}</p>
                    {inc.resolution && (
                      <p className="log-resolution"><span className="lr-label">resolution <span className="am">·</span></span> {inc.resolution}</p>
                    )}
                  </div>
                </li>
              ))}
            </ol>
          )}
        </section>

        {/* Footer note — operational discipline */}
        <section className="status-foot-note">
          <p>
            This page is maintained by hand. Uptime is calculated against the
            post-delivery contract in <a href="docs.html#slas">spec § 09</a>:
            Signal Intelligence weekdays 06:00 PT, Cascade Report first business
            day of month 09:00 PT, TAM Map first business day of quarter 09:00 PT,
            Delivery Report monthly 09:00 PT. Anomaly alerts are reactive and not
            counted against this page.
          </p>
        </section>
      </div>
    </main>
  );
}

window.StatusPage = StatusPage;