/* global React, Icon, StatusChip, Avatar, PageHeader, Drawer, DrawerHead, Tabs, Meta, Banner, LCR_ROWS, LCR_RESULT, PEOPLE, etb, useToast */
const { useState: useStateW, useEffect: useEffectW } = React;

const WP_HELP = {
  title: "ALM / Liquidity · LCR / NSFR",
  purpose: "The liquidity workpaper. Every weighted value traces from a source cashflow through a mapped cell to an NBE factor reference, with stress kept strictly separate from the official baseline.",
  first: "Read the ratio header, then scan the Rule-evidence column. Amber rows are the factors still missing an NBE reference — those block official use.",
  terms: [
    ["HQLA", "High-quality liquid assets — the numerator of the LCR."],
    ["Outflow factor", "The NBE run-off rate applied to a liability over 30 days."],
    ["Net cash outflows", "Outflows minus capped inflows — the LCR denominator."],
    ["Stress overlay", "Analysis-only columns; never merged into the baseline ratio."],
  ],
  next: [
    "Click any factor or weighted cell to open its evidence in the inspector.",
    "Attach an NBE rule reference to the amber outflow factors.",
    "Send the workpaper to a checker once evidence is complete.",
  ],
  connections: [
    "Source cashflows live in the Data Harmonizer.",
    "Stress columns are driven from Stress Lab scenarios.",
    "This workpaper feeds the NBE Liquidity Return at the export gate.",
  ],
  guardrail: "This is an internal liquidity workpaper, not an official NBE calculation. Stress values are analysis-only and never overwrite the baseline ratio.",
};

const WORKPAPER_LCR_ROWS = LCR_ROWS;
const WORKPAPER_LCR_RESULT = LCR_RESULT;

function Workpaper({ go, info }) {
  const [view, setView] = useStateW(window.__wpView === "lcr" ? "LCR" : window.__wpView === "alm" ? "ALM ladder" : "LCR");
  const [stress, setStress] = useStateW(false);
  const [sel, setSel] = useStateW(null);   // selected row
  const [toastNode, showToast] = useToast();
  const r = WORKPAPER_LCR_RESULT;
  const title = view === "ALM ladder" ? "ALM / Liquidity" : "LCR / NSFR";
  const setWorkpaperView = (next) => {
    window.__wpView = next === "ALM ladder" ? "alm" : next === "LCR" ? "lcr" : "nsfr";
    setView(next);
  };

  return (
    <div className="main-inner wide" style={{ maxWidth: 1280 }}>
      <PageHeader
        eyebrow="Prudential Risk · Liquidity"
        title={title}
        onInfo={() => info(WP_HELP)}
        right={<React.Fragment>
          <button className={"btn btn-sm " + (stress ? "btn-dark" : "btn-ghost")} onClick={() => setStress(!stress)}>
            <Icon name="flask" size={15} /> <span>Stress overlay {stress ? "on" : "off"}</span>
          </button>
          <button className="btn btn-ghost btn-sm" onClick={() => go("stress")}><Icon name="sliders" size={15} /> Scenarios</button>
        </React.Fragment>}
      />

      {/* result header */}
      <div className="grid g4" style={{ marginBottom: 18 }}>
        <ResultCard label="Total HQLA" v={etb(r.hqla)} foot="Br '000 · reconciled" tone="green" />
        <ResultCard label="Net cash outflows" v={etb(r.netOut)} foot="Outflows − capped inflows" />
        <ResultCard label="LCR ratio" v={r.ratio + "%"} foot={"NBE minimum " + r.min + "%"} tone="green" big chip="REVIEW_PENDING" />
        <ResultCard label="Stressed LCR" v={stress ? r.stressedRatio + "%" : "—"} foot={stress ? "NBE adverse · analysis-only" : "Overlay off"} tone="indigo" chip={stress ? "STRESS_ONLY" : null} />
      </div>

      {/* view toggle */}
      <div className="between" style={{ marginBottom: 14 }}>
        <div className="seg-ctl">
          {["ALM ladder", "LCR", "NSFR"].map(t => <button key={t} className={view === t ? "on" : ""} onClick={() => setWorkpaperView(t)}>{t}</button>)}
        </div>
        <div className="center gap10 muted" style={{ fontSize: 12 }}>
          <Icon name="info" size={14} /> Click any cell with a dashed underline to open its evidence
        </div>
      </div>

      {view === "LCR" && <LCRGrid stress={stress} onSel={setSel} sel={sel} />}
      {view === "ALM ladder" && <ALMLadder stress={stress} />}
      {view === "NSFR" && <NSFRGrid />}

      {/* approval footer */}
      <div className="mt20">
        <div className="section-label mb8">Sign-off</div>
        <div className="approval">
          <div className="seg"><div className="lbl">Prepared by</div><div className="who">Dawit Bekele</div><div className="when">Jun 30, 11:04</div></div>
          <div className="seg"><div className="lbl">Checked by</div><div className="who" style={{ color: "var(--amber)" }}>Pending</div><div className="when">Awaiting evidence</div></div>
          <div className="seg"><div className="lbl">Approved by</div><div className="who" style={{ color: "var(--ink-3)" }}>—</div><div className="when">Internal only</div></div>
          <div className="seg" style={{ display: "grid", placeItems: "center", background: "var(--surface-2)" }}>
            <button className="btn btn-dark btn-sm" onClick={() => showToast("Sent to checker · Sara Tesfaye")}>Send to checker</button>
          </div>
        </div>
      </div>

      <RowInspector row={sel} onClose={() => setSel(null)} go={go} showToast={showToast} />
      {toastNode}
    </div>
  );
}

function ResultCard({ label, v, foot, tone, big, chip }) {
  const c = { green: "var(--green-ink)", indigo: "var(--indigo)" }[tone] || "var(--ink)";
  return (
    <div className="card card-pad" style={{ padding: "15px 18px" }}>
      <div className="between"><div className="section-label">{label}</div>{chip && <StatusChip s={chip} />}</div>
      <div className="big-num tnum" style={{ marginTop: 6, color: c, fontSize: big ? 34 : 30 }}>{v}</div>
      <div className="muted" style={{ fontSize: 11.5, marginTop: 4 }}>{foot}</div>
    </div>
  );
}

/* ---------- LCR grid ---------- */
function LCRGrid({ stress, onSel, sel }) {
  return (
    <div className="wp">
      <div className="wp-scroll">
        <table style={{ tableLayout: "fixed" }}>
          <colgroup>
            <col style={{ width: stress ? 280 : 340 }} />
            <col style={{ width: 128 }} />
            <col style={{ width: 72 }} />
            <col style={{ width: 118 }} />
            {stress && <col style={{ width: 92 }} />}
            {stress && <col style={{ width: 116 }} />}
            <col style={{ width: stress ? 180 : 230 }} />
            <col style={{ width: 164 }} />
          </colgroup>
          <thead>
            <tr>
              <th>Line item</th>
              <th className="num">Source amount</th>
              <th className="num">Factor</th>
              <th className="num">Weighted</th>
              {stress && <th className="num stress-col">Stress factor</th>}
              {stress && <th className="num stress-col">Stressed wtd</th>}
              <th>Rule evidence</th>
              <th>State</th>
            </tr>
          </thead>
          <tbody>
            {WORKPAPER_LCR_ROWS.map((row, i) => {
              if (row.type === "section") return <tr key={i} className="section"><td colSpan={stress ? 8 : 6}>{row.label}</td></tr>;
              if (row.type === "subtotal") return (
                <tr key={i} className="subtotal">
                  <td style={{ whiteSpace: "normal", lineHeight: 1.25 }}>{row.label}</td><td></td><td></td>
                  <td className="num tnum">{etb(row.weighted)}</td>
                  {stress && <td className="stress-col"></td>}
                  {stress && <td className="num tnum stress-col">{etb(Math.round(row.weighted * (row.label.includes("outflow") ? 1.7 : row.label.includes("HQLA") ? .9 : .65)))}</td>}
                  <td></td><td></td>
                </tr>
              );
              const noEvi = row.evi === "EVIDENCE_NEEDED";
              const isSel = sel && sel.label === row.label;
              return (
                <tr key={i} className={"click" + (isSel ? " sel" : "")} onClick={() => onSel(row)}>
                  <td style={{ fontWeight: 500, whiteSpace: "normal", lineHeight: 1.25 }}>{row.label}</td>
                  <td className="num tnum">{etb(row.amount)}</td>
                  <td className="num"><span className="cell-evi" onClick={(e) => { e.stopPropagation(); onSel(row); }}>{row.factor}</span></td>
                  <td className="num tnum" style={{ fontWeight: 600 }}>{etb(row.weighted)}</td>
                  {stress && <td className="num stress-col" style={{ color: "var(--indigo)" }}>{adjFactor(row.factor)}</td>}
                  {stress && <td className="num tnum stress-col" style={{ color: "var(--indigo)" }}>{etb(Math.round(row.weighted * 1.7))}</td>}
                  <td>{noEvi ? <span className="center gap6" style={{ color: "var(--amber)", fontWeight: 600, fontSize: 12 }}><Icon name="alert" size={13} /> no reference</span> : <span className="mono muted" style={{ fontSize: 12 }}>{row.rule}</span>}</td>
                  <td style={{ textAlign: "right" }}><StatusChip s={row.evi} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
function adjFactor(f) { const n = parseInt(f); return isNaN(n) ? f : Math.min(100, Math.round(n * 1.8)) + "%"; }

/* ---------- ALM maturity ladder ---------- */
function ALMLadder({ stress }) {
  const buckets = ["O/N–7d", "8d–1m", "1–3m", "3–6m", "6–12m", "1–3y", ">3y"];
  const assets = [42000, 18500, 22000, 19500, 24000, 38000, 41000];
  const liabs = [58000, 26000, 19000, 14500, 11000, 9000, 6500];
  const net = assets.map((a, i) => a - liabs[i]);
  let cum = 0; const cumul = net.map(n => (cum += n));
  return (
    <div className="wp">
      <div className="wp-scroll">
        <table>
          <thead><tr><th style={{ minWidth: 200 }}>Time bucket</th>{buckets.map(b => <th key={b} className="num">{b}</th>)}</tr></thead>
          <tbody>
            <tr className="click"><td>Inflows / assets</td>{assets.map((a, i) => <td key={i} className="num tnum">{etb(a)}</td>)}</tr>
            <tr className="click"><td>Outflows / liabilities</td>{liabs.map((a, i) => <td key={i} className="num tnum">{etb(a)}</td>)}</tr>
            <tr className="subtotal"><td>Net mismatch</td>{net.map((a, i) => <td key={i} className="num tnum" style={{ color: a < 0 ? "var(--red)" : "var(--green-ink)" }}>{etb(a)}</td>)}</tr>
            <tr className="total"><td>Cumulative mismatch</td>{cumul.map((a, i) => <td key={i} className="num tnum" style={{ color: a < 0 ? "var(--red)" : "var(--ink)" }}>{etb(a)}</td>)}</tr>
          </tbody>
        </table>
      </div>
      <div style={{ padding: "14px 16px", borderTop: "1px solid var(--border)" }}>
        <Banner kind="amber" icon="alert"><b>Behavioral assumptions pending bank policy.</b> Non-maturity deposit core/non-core split is not yet configured, so the ladder uses contractual maturities. Survival horizon shown is provisional.</Banner>
      </div>
    </div>
  );
}

/* ---------- NSFR ---------- */
function NSFRGrid() {
  const asf = [["Tier 1 & 2 capital", 41000, "100%", 41000], ["Stable retail deposits", 64200, "95%", 60990], ["Less stable deposits", 28900, "90%", 26010], ["Wholesale < 1yr", 21400, "50%", 10700]];
  const rsf = [["Cash & NBE reserves", 18420, "0%", 0], ["Govt securities", 9650, "5%", 482], ["Performing loans < 1yr", 38000, "50%", 19000], ["Performing loans > 1yr", 54000, "85%", 45900]];
  const totASF = 138690, totRSF = 65382;
  return (
    <div className="grid g2" style={{ alignItems: "start" }}>
      <NSFRTable title="Available Stable Funding (ASF)" rows={asf} total={totASF} />
      <div>
        <NSFRTable title="Required Stable Funding (RSF)" rows={rsf} total={totRSF} />
        <div className="card card-pad mt16 between">
          <div><div className="section-label">NSFR ratio</div><div className="big-num tnum" style={{ color: "var(--green-ink)" }}>121%</div></div>
          <div style={{ textAlign: "right" }}><StatusChip s="REVIEW_PENDING" /><div className="muted mt4" style={{ fontSize: 11.5 }}>NBE minimum 100%</div></div>
        </div>
      </div>
    </div>
  );
}
function NSFRTable({ title, rows, total }) {
  return (
    <div className="wp">
      <div className="panel-h" style={{ padding: "16px 18px 0" }}><h3 style={{ fontSize: 14 }}>{title}</h3></div>
      <table style={{ marginTop: 8 }}>
        <thead><tr><th>Item</th><th className="num">Amount</th><th className="num">Factor</th><th className="num">Weighted</th></tr></thead>
        <tbody>
          {rows.map((r, i) => <tr key={i} className="click"><td>{r[0]}</td><td className="num tnum">{etb(r[1])}</td><td className="num">{r[2]}</td><td className="num tnum" style={{ fontWeight: 600 }}>{etb(r[3])}</td></tr>)}
          <tr className="total"><td>Total</td><td></td><td></td><td className="num tnum">{etb(total)}</td></tr>
        </tbody>
      </table>
    </div>
  );
}

/* ---------- Row inspector ---------- */
function RowInspector({ row, onClose, go, showToast }) {
  const [tab, setTab] = useStateW("Row detail");
  useEffectW(() => { if (row) setTab("Row detail"); }, [row]);
  if (!row) return null;
  const noEvi = row.evi === "EVIDENCE_NEEDED";
  return (
    <Drawer open={!!row} onClose={onClose}>
      <DrawerHead title={row.label} sub={"Weighted " + etb(row.weighted) + " · factor " + row.factor} chip={<StatusChip s={row.evi} />} onClose={onClose} />
      <Tabs tabs={["Row detail", "Source", "Factor evidence", "Stress", "Blockers", "Approvals"]} active={tab} onChange={setTab} />
      <div className="drawer-body">
        {tab === "Row detail" && <Meta rows={[
          ["Source amount", <span className="tnum">{etb(row.amount)} '000</span>],
          ["NBE factor", row.factor],
          ["Weighted value", <span className="tnum">{etb(row.weighted)} '000</span>],
          ["Reconciliation", "Tied to deposits ledger"],
          ["Calculation", "amount × factor"],
        ]} />}

        {tab === "Source" && <div>
          <div className="evi-row"><span className="ic-wrap"><Icon name="database" size={15} /></span><div className="grow"><div className="t">Core Banking — Deposits ledger</div><div className="d">T24 · hash 9f3c·a21e · 184,230 rows</div></div><StatusChip s="RECONCILED" /></div>
          <button className="btn btn-ghost btn-sm mt16" onClick={() => go("harmonizer")}><Icon name="arrowR" size={14} /> Open source snapshot</button>
        </div>}

        {tab === "Factor evidence" && (noEvi
          ? <React.Fragment>
              <Banner kind="amber" icon="alert"><b>Rule evidence needed.</b> No NBE reference is attached to this outflow factor. Until a directive reference is attached and checked, this row cannot feed an official return.</Banner>
              <div className="mt16 field"><label>Attach NBE reference</label><input placeholder="e.g. NBE LRM §5.2 — run-off rates" /></div>
              <button className="btn btn-primary" onClick={() => showToast("Rule evidence attached and sent to checker")}><Icon name="clipboard" size={15} /> Attach &amp; send to checker</button>
            </React.Fragment>
          : <React.Fragment>
              <div className="evi-row"><span className="ic-wrap" style={{ color: "var(--green-ink)" }}><Icon name="clipboard" size={15} /></span><div className="grow"><div className="t">{row.rule}</div><div className="d">NBE Liquidity Risk Management directive</div></div><Icon name="checkCirc" size={18} style={{ color: "var(--green)" }} /></div>
              <Meta rows={[["Reference", row.rule], ["Attached by", "Sara Tesfaye"], ["Checked by", "Hana Girma"], ["Status", "Verified internal"]]} />
            </React.Fragment>)}

        {tab === "Stress" && <div>
          <Banner kind="indigo" icon="flask"><b>Analysis-only.</b> Stress figures never overwrite the baseline weighted value.</Banner>
          <table className="tbl mt12"><thead><tr><th>Basis</th><th className="num">Factor</th><th className="num">Weighted</th></tr></thead>
            <tbody>
              <tr><td>Baseline</td><td className="num">{row.factor}</td><td className="num tnum">{etb(row.weighted)}</td></tr>
              <tr><td style={{ color: "var(--indigo)" }}>NBE adverse</td><td className="num" style={{ color: "var(--indigo)" }}>{adjFactor(row.factor)}</td><td className="num tnum" style={{ color: "var(--indigo)" }}>{etb(Math.round(row.weighted * 1.7))}</td></tr>
            </tbody></table>
        </div>}

        {tab === "Blockers" && (noEvi
          ? <div className="cl"><span className="cl-ic" style={{ background: "var(--amber-soft)", color: "var(--amber)" }}><Icon name="clipboard" size={15} /></span>
              <div className="grow"><div style={{ fontWeight: 600 }}>Missing rule evidence</div><div className="muted" style={{ fontSize: 12 }}>Owner: Sara Tesfaye · Next: attach NBE directive reference</div></div>
              <button className="btn btn-ghost btn-sm" onClick={() => go("exceptions")}>Open</button></div>
          : <div className="center gap10" style={{ padding: "20px 0", color: "var(--green-ink)" }}><Icon name="checkCirc" size={18} /> No blockers on this row.</div>)}

        {tab === "Approvals" && <Meta rows={[["Prepared by", "Dawit Bekele"], ["Checked by", noEvi ? "Pending" : "Hana Girma"], ["Approved", "Internal workpaper"], ["Audit", "12 events"]]} />}
      </div>
      <div className="drawer-foot">
        <span className="muted center gap6" style={{ fontSize: 12 }}><Icon name="info" size={14} /> Internal workpaper cell</span>
        <button className="btn btn-dark" style={{ marginLeft: "auto" }} onClick={() => go("exceptions")}>{noEvi ? "Resolve blocker" : "View lineage"} <Icon name="arrowR" size={14} /></button>
      </div>
    </Drawer>
  );
}

window.Workpaper = Workpaper;