/* global React, Icon, StatusChip, Avatar, OB_MODULES, PEOPLE, SOURCES, BANK */
const { useState: useStateO } = React;

const OB_STEPS = [
  { st: "Bank workspace", sd: "Entity, currency, calendar" },
  { st: "Country pack", sd: "Activate NBE prudential pack" },
  { st: "Reporting modules", sd: "Choose what to run" },
  { st: "Source requirements", sd: "Generated checklist" },
  { st: "Assign owners", sd: "Maker / checker per module" },
];

function Onboarding({ go }) {
  const [step, setStep] = useStateO(0);
  const [mods, setMods] = useStateO(OB_MODULES.map(m => m.on));
  const [pack, setPack] = useStateO(true);

  const next = () => step < OB_STEPS.length - 1 ? setStep(step + 1) : go("control");

  return (
    <div className="ob-wrap">
      <aside className="ob-rail">
        <div className="center gap10 mb24"><div className="sb-mark">T</div><div style={{ fontWeight: 800, fontSize: 17 }}>Treasury<span>OS</span></div></div>
        <div className="section-label mb12">Workspace setup</div>
        {OB_STEPS.map((s, i) => (
          <div key={i} className={"ob-step" + (i === step ? " active" : i < step ? " done" : "")} onClick={() => i < step && setStep(i)} style={{ cursor: i < step ? "pointer" : "default" }}>
            <span className="num">{i < step ? <Icon name="check" size={13} /> : i + 1}</span>
            <div><div className="st">{s.st}</div><div className="sd">{s.sd}</div></div>
          </div>
        ))}
        <div style={{ position: "absolute", bottom: 28, left: 28, right: 28 }}>
          <div className="banner banner-amber" style={{ fontSize: 12 }}><Icon name="lock" size={16} className="ic" /><div>This wizard configures an <b>internal workspace</b>. It does not connect to NBE or enable official submission.</div></div>
        </div>
      </aside>

      <main className="ob-main">
        <div className="ob-card">
          {step === 0 && <Step title="Set up the bank workspace" sub="TreasuryOS organizes prudential work by legal entity and reporting cycle.">
            <div className="grid g2" style={{ gap: 18 }}>
              <Field label="Bank / institution"><input defaultValue="Meskel Bank S.C." /></Field>
              <Field label="Reporting entity"><select defaultValue="group"><option value="group">Meskel Bank — Banking Group</option><option>Meskel Bank — Solo</option></select></Field>
              <Field label="Reporting currency"><select><option>ETB — Ethiopian Birr</option></select></Field>
              <Field label="Reporting cycle"><select><option>Quarterly · period-end</option><option>Monthly</option></select></Field>
              <Field label="Cycle calendar"><select><option>Ethiopian fiscal (Hamle–Sene)</option><option>Gregorian</option></select></Field>
              <Field label="Maker-checker policy"><select><option>Dual control (maker + checker)</option><option>Triple control</option></select></Field>
            </div>
          </Step>}

          {step === 1 && <Step title="Activate a country pack" sub="A pack ships NBE templates, factor libraries, and source requirements. It is the regulatory frame for everything downstream.">
            <div className={"opt-card" + (pack ? " on" : "")} onClick={() => setPack(true)} style={{ padding: "20px 22px" }}>
              <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center" }}><Icon name="globe" size={22} /></span>
              <div className="grow"><div style={{ fontWeight: 800, fontSize: 16 }}>Ethiopia · National Bank of Ethiopia</div><div className="muted" style={{ fontSize: 13, marginTop: 2 }}>NBE Prudential Pack v3.1 — LRM, CAR, Large Exposures, NOP, Operational Risk templates &amp; factor libraries.</div>
                <div className="center gap6 mt8 wrap">{["LCR / NSFR", "CAR", "NOP", "Large exposures"].map(t => <span key={t} className="chip chip-neutral">{t}</span>)}</div></div>
              <span className="ck">{pack && <Icon name="check" size={13} />}</span>
            </div>
            <div className="opt-card dim mt16" style={{ padding: "16px 22px", cursor: "not-allowed" }}>
              <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center" }}><Icon name="globe" size={22} /></span>
              <div className="grow"><div style={{ fontWeight: 800, fontSize: 16 }}>Other jurisdictions</div><div className="muted" style={{ fontSize: 13 }}>Additional country packs are a future capability.</div></div>
              <StatusChip s="OFFICIAL_FUTURE" />
            </div>
          </Step>}

          {step === 2 && <Step title="Choose reporting modules" sub="Enable only what this entity reports. Each module generates its own source requirements and owner queue.">
            <div className="grid g2" style={{ gap: 12 }}>
              {OB_MODULES.map((m, i) => (
                <div key={m.id} className={"opt-card" + (mods[i] ? " on" : "")} onClick={() => setMods(mods.map((v, j) => j === i ? !v : v))}>
                  <div className="grow"><div style={{ fontWeight: 700, fontSize: 14 }}>{m.name}</div><div className="muted" style={{ fontSize: 12 }}>{m.desc}</div>{!m.on && <span className="chip chip-neutral mt8">Optional</span>}</div>
                  <span className="ck">{mods[i] && <Icon name="check" size={13} />}</span>
                </div>
              ))}
            </div>
          </Step>}

          {step === 3 && <Step title="Source requirements" sub="The pack generated this checklist from your selected modules. These are the extracts the bank must provide before any workpaper can be trusted.">
            {SOURCES.slice(0, 6).map(s => (
              <div key={s.id} className="cl">
                <span className="cl-ic" style={{ background: s.synthetic ? "var(--indigo-soft)" : "var(--surface-2)", color: s.synthetic ? "var(--indigo)" : "var(--ink-2)" }}><Icon name={s.synthetic ? "flask" : "database"} size={15} /></span>
                <div className="grow"><div style={{ fontWeight: 600, fontSize: 13.5 }}>{s.name}</div><div className="muted" style={{ fontSize: 12 }}>{s.system} · {s.method}</div></div>
                <span className="chip chip-neutral">Required</span>
              </div>
            ))}
            <div className="banner banner-indigo mt12"><Icon name="info" size={18} className="ic" /><div>You can connect these now or later in the Data Harmonizer. Uploading a source does not make it official — each one still passes validation, mapping, reconciliation, and evidence.</div></div>
          </Step>}

          {step === 4 && <Step title="Assign module owners" sub="Every module needs a maker and a checker. Owners receive tasks in the Control Room queue.">
            {[["ALM / Liquidity", "dawit", "sara"], ["LCR / NSFR", "sara", "hana"], ["Capital Adequacy", "meron", "hana"], ["Credit Risk", "yonas", "meron"], ["Market / FX · NOP", "abel", "hana"]].map((r, i) => (
              <div key={i} className="cl">
                <div className="grow" style={{ fontWeight: 600 }}>{r[0]}</div>
                <div className="center gap16">
                  <div className="center gap6"><span className="muted" style={{ fontSize: 11.5 }}>Maker</span><Avatar name={PEOPLE[r[1]].name} size={22} /><span style={{ fontSize: 12.5 }}>{PEOPLE[r[1]].name.split(" ")[0]}</span></div>
                  <div className="center gap6"><span className="muted" style={{ fontSize: 11.5 }}>Checker</span><Avatar name={PEOPLE[r[2]].name} size={22} /><span style={{ fontSize: 12.5 }}>{PEOPLE[r[2]].name.split(" ")[0]}</span></div>
                </div>
              </div>
            ))}
          </Step>}

          <div className="between mt24">
            <button className="btn btn-quiet" onClick={() => step > 0 ? setStep(step - 1) : go("control")}>{step > 0 ? "Back" : "Skip to Control Room"}</button>
            <button className="btn btn-primary" onClick={next}>{step === OB_STEPS.length - 1 ? "Finish & open Control Room" : "Continue"} <Icon name="arrowR" size={15} /></button>
          </div>
        </div>
      </main>
    </div>
  );
}

function Step({ title, sub, children }) {
  return (
    <div>
      <h1 style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-.025em", margin: "0 0 6px" }}>{title}</h1>
      <p className="muted" style={{ fontSize: 14.5, margin: "0 0 26px", maxWidth: 580, lineHeight: 1.5 }}>{sub}</p>
      {children}
    </div>
  );
}
function Field({ label, children }) { return <label className="field"><span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-2)", display: "block", marginBottom: 6 }}>{label}</span>{children}</label>; }

window.Onboarding = Onboarding;