/* global React, Icon, StatusChip, PageHeader, Banner */

/* ============================================================
   Roadmap shells — Treasury Ops & Intelligence (P2/P3)
   Readiness/roadmap surfaces ONLY. No live engines, no dealing,
   no market data, no automated decisions. Guardrailed by design.
   ============================================================ */
const ROADMAP = {
  "rm-tms": { eyebrow: "Treasury Ops", title: "TMS Deal Workflow", phase: "P2 · planned",
    what: "A governed deal-capture workflow for money-market and FX deals — request → approve → settle, with maker-checker and an audit trail.",
    guard: "Workflow & readiness only. It will never place or execute trades, connect to a dealing system, or move funds.",
    caps: ["Deal request & approval (maker-checker)", "Settlement instruction workflow", "Limit checks against treasury policy", "Audit trail of every deal action"] },
  "rm-hedge": { eyebrow: "Treasury Ops", title: "FX Hedge Flow", phase: "P2 · planned",
    what: "A hedge-request workflow: desk raises a hedge need, it's sized against the open position, approved, and recorded as management intent.",
    guard: "Hedge-request workflow only — never implies a trade was placed. Distinct from the separate FX Exposure (fxexport) product.",
    caps: ["Hedge request sized vs NOP", "Approval & documentation", "Links to Market / FX workpaper", "Recorded as management intent"] },
  "rm-blotter": { eyebrow: "Treasury Ops", title: "Deal Blotter", phase: "P2 · planned",
    what: "A read-only register of recorded deals across desks — a single view of positions and tickets for review and reconciliation.",
    guard: "Read-only register concept. No live market data, no pricing feed, no execution.",
    caps: ["Consolidated deal register", "Position & ticket review", "Reconciles to source blotters", "Read-only — no live feed"] },
  "rm-corp": { eyebrow: "Treasury Ops", title: "CorpTreasury", phase: "P3 · roadmap",
    what: "Corporate-treasury surfaces — cash positioning, intercompany, and funding views for a banking group.",
    guard: "Roadmap concept only. Not scoped for the current release.",
    caps: ["Group cash positioning", "Intercompany views", "Funding planning", "Roadmap — not yet scoped"] },
  "rm-ai": { eyebrow: "Intelligence", title: "Analytics / AI", phase: "P3 · roadmap",
    what: "Analytical overlays — anomaly flags on sources, trend analytics across cycles, and assistive summaries for ALCO packs.",
    guard: "Must never imply live model inference or automated decisions. Any AI output is assistive and analysis-only, with a human in the loop.",
    caps: ["Anomaly flags on source data", "Cross-cycle trend analytics", "Assistive pack summaries (human-reviewed)", "No automated decisions"] },
  "rm-intraday": { eyebrow: "Intelligence", title: "Intraday Liquidity", phase: "P3 · roadmap",
    what: "Intraday position monitoring — settlement timing, throughput, and intraday buffer views.",
    guard: "\"Real-time\" wording is forbidden until a live feed exists. Shown as a readiness/roadmap surface only.",
    caps: ["Intraday position view", "Settlement timing", "Buffer monitoring", "No live feed in this build"] },
  "rm-alerts": { eyebrow: "Intelligence", title: "Real-Time Alerts", phase: "P3 · roadmap",
    what: "Threshold alerts — early-warning triggers on indicators (LCR, NOP, exceptions) routed to owners.",
    guard: "No live-integration claim. Alert rules are configuration; delivery is a future capability.",
    caps: ["Threshold rule configuration", "Indicator early-warning", "Owner routing", "Delivery is future capability"] },
  "rm-packs": { eyebrow: "Intelligence", title: "Country Packs", phase: "P3 · roadmap",
    what: "Additional regulator packs (e.g. Kenya / CBK) — templates, factor libraries and source requirements, activated like the NBE pack.",
    guard: "Configuration surface only. Only the Ethiopia / NBE pack is active today.",
    caps: ["Regulator template bundles", "Factor libraries", "Source-requirement generation", "Only NBE active today"] },
  "rm-climate": { eyebrow: "Intelligence", title: "Climate Risk", phase: "P3 · roadmap",
    what: "Climate & transition-risk scenario surfaces for the loan book — physical and transition stress overlays.",
    guard: "Roadmap concept only. Not a production engine; no climate data integrated.",
    caps: ["Physical-risk scenarios", "Transition-risk overlays", "Loan-book exposure views", "Roadmap — not scoped"] },
};

function Roadmap({ route, go, info }) {
  const r = ROADMAP[route] || ROADMAP["rm-tms"];
  return (
    <div className="main-inner">
      <PageHeader eyebrow={r.eyebrow} title={r.title}
        onInfo={() => info({ title: r.title, purpose: r.what, first: "This is a roadmap/readiness surface — the capability is planned, not built. Nothing here is a live engine.", terms: [["Roadmap", "Planned capability, not yet implemented."], ["Readiness surface", "Shows what the module will do and its guardrails."]], next: ["Review the planned capabilities.", "Note the guardrails on what it will never do."], connections: ["Will connect to the prudential/governance core once built."], guardrail: r.guard })}
        right={<StatusChip s="OFFICIAL_FUTURE" lg />} />

      <div style={{ marginBottom: 18 }}><Banner kind="amber" icon="lock"><b>Roadmap surface — {r.phase}.</b> {r.guard}</Banner></div>

      <div className="grid" style={{ gridTemplateColumns: "1.3fr 1fr", gap: 18, alignItems: "start" }}>
        <div className="card card-pad">
          <div className="section-label mb8">What this module will do</div>
          <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.6, margin: "0 0 16px" }}>{r.what}</p>
          <div className="section-label mb8">Planned capabilities</div>
          {r.caps.map((c, i) => (
            <div key={i} className="center gap10" style={{ padding: "9px 0", borderBottom: i < r.caps.length - 1 ? "1px solid var(--border)" : "none" }}>
              <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--surface-2)", border: "1px solid var(--border)", color: "var(--ink-3)", display: "grid", placeItems: "center", flex: "0 0 auto" }}><Icon name="clock" size={13} /></span>
              <span style={{ fontSize: 13.5 }}>{c}</span>
            </div>
          ))}
        </div>

        <div className="col" style={{ gap: 16 }}>
          <div className="card card-pad" style={{ textAlign: "center" }}>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--surface-2)", border: "1px solid var(--border)", color: "var(--ink-3)", display: "grid", placeItems: "center", margin: "0 auto 14px" }}><Icon name="map" size={26} /></div>
            <div style={{ fontWeight: 800, fontSize: 16 }}>Not built yet</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>This surface is on the roadmap. The prudential and governance core is live today; this module activates in a later phase.</div>
            <button className="btn btn-ghost btn-sm" style={{ marginTop: 16 }} onClick={() => go("control")}>Back to Control Room</button>
          </div>
          <div className="card card-pad">
            <div className="section-label mb8">Guardrails</div>
            <div className="center gap8" style={{ fontSize: 12.5, color: "var(--ink-2)", marginBottom: 8 }}><Icon name="lock" size={14} style={{ color: "var(--amber)" }} /> {r.guard}</div>
            <div className="muted" style={{ fontSize: 11.5, lineHeight: 1.5 }}>Shown so stakeholders see the full platform vision without mistaking a roadmap tile for a working engine.</div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Roadmap = Roadmap;
window.ROADMAP = ROADMAP;