/* ===== App shell ===== */
const { useState, useMemo, useCallback } = React;

function Header() {
  const nav = [["DASHBOARD", false], ["VaR", true], ["STRESS", false], ["SUPPORT", false]];
  return (
    <header className="app-header">
      <div className="app-header-inner">
        <div className="brand">
          <span className="brand-mark"><i></i><i></i></span>
          <span className="brand-word">VaR&nbsp;Calculator</span>
        </div>
        <nav className="main-nav">
          {nav.map(([label, active]) => (
            <button key={label} className={"nav-item" + (active ? " active" : "")}>
              {label}<Icon name="chevDown" size={14} sw={2.2} />
            </button>
          ))}
        </nav>
        <div className="header-tools">
          <button className="tool-btn"><Icon name="globe" size={20} /></button>
          <button className="tool-btn"><Icon name="wrench" size={20} /></button>
          <button className="tool-btn"><Icon name="bell" size={20} /></button>
          <button className="tool-btn"><Icon name="user" size={20} /></button>
        </div>
      </div>
    </header>
  );
}

function App() {
  // ---- side toggle ----
  const [side, setSide] = useState("scope"); // scope | config

  // ---- scope state ----
  const [scopeTab, setScopeTab] = useState("portfolio");
  const [expanded, setExpanded] = useState({ ir: true, "ir-vol": true });
  const [selected, setSelected] = useState({ "ir-vol:0": true, "ir-vol:1": true, "fx-spot:0": true });
  const [search, setSearch] = useState("");

  const toggleExpand = useCallback((id) => setExpanded((e) => ({ ...e, [id]: !e[id] })), []);
  const toggleSelect = useCallback((id, force) =>
    setSelected((s) => ({ ...s, [id]: typeof force === "boolean" ? force : !s[id] })), []);

  const selCount = useMemo(() => Object.values(selected).filter(Boolean).length, [selected]);

  // build scope summary (groups with selected leaf counts) for current tab
  const scopeSummary = useMemo(() => {
    const data = SCOPE_DATA[scopeTab];
    const groups = [];
    let count = 0;
    data.tree.forEach((g) => {
      (g.children || []).forEach((c) => {
        const n = (c.leaves || []).filter((_, i) => selected[`${c.id}:${i}`]).length;
        if (n > 0) { groups.push({ name: `${g.name} · ${c.name}`, count: n }); count += n; }
      });
    });
    return { groups, count };
  }, [scopeTab, selected]);

  // ---- config state ----
  const [cfg, setCfg] = useState({
    regulator: "FRB", measure: "VaR", valuation: "Risk Sens",
    plInterp: "Percentile", holding: "1-Day", decay: "0.99",
    percentile: "99%", modelVersion: "Prod", tsVersion: "TS_2026_05_PROD",
  });
  const [outputs, setOutputs] = useState({ "Spot VaR": true, "Marginal VaR": true });
  const [analysis, setAnalysis] = useState({ "VaR Benchmarking": true });

  const toggleOutput = useCallback((k) => setOutputs((o) => ({ ...o, [k]: !o[k] })), []);
  const toggleAnalysis = useCallback((k) => setAnalysis((a) => ({ ...a, [k]: !a[k] })), []);

  // ---- run ----
  const [running, setRunning] = useState(false);
  const [hasRun, setHasRun] = useState(false);
  const [rows, setRows] = useState([]);

  const handleRun = useCallback(() => {
    if (running) return;
    setRunning(true);
    setHasRun(false);
    setTimeout(() => {
      setRows(buildOutputRows(cfg));
      setRunning(false);
      setHasRun(true);
    }, 1100);
  }, [running, cfg]);

  return (
    <>
      <Header />
      <div className="control-band">
        <div className="band-inner">
          <div className="band-pill ghost" style={{ minWidth: 240 }}>
            <span><span className="pre" style={{ color: "rgba(255,255,255,.6)" }}>COB</span>&nbsp;&nbsp;2026-06-02</span>
            <Icon name="calendar" size={18} style={{ color: "#fff" }} />
          </div>
          <div className="band-pill ghost">
            Entity Scope: BHC
            <span className="circle-chev"><Icon name="chevDown" size={13} sw={2.4} /></span>
          </div>
          <div className="band-pill ghost">
            Market Risk
            <span className="circle-chev"><Icon name="chevDown" size={13} sw={2.4} /></span>
          </div>
          <button className={"run-btn" + (running ? " busy" : "")} onClick={handleRun}>
            {running ? <><span className="spinner" />Running</> : <><Icon name="play" size={14} />Run</>}
          </button>
        </div>
      </div>

      <div className="workspace">
        {/* LEFT: control card */}
        <div className="card" style={{ minHeight: 660 }}>
          <div className="panel-h">
            <div>
              <h2 className="panel-title">Run Parameters</h2>
              <div className="panel-sub">{side === "scope" ? "Define the calculation scope" : "Configure VaR calculation"}</div>
            </div>
            <div className="seg">
              <button className={side === "scope" ? "on" : ""} onClick={() => setSide("scope")}>
                Scope
              </button>
              <button className={side === "config" ? "on" : ""} onClick={() => setSide("config")}>
                Config
              </button>
            </div>
          </div>

          {side === "scope" ? (
            <ScopePanel
              scopeTab={scopeTab} setScopeTab={setScopeTab}
              expanded={expanded} toggleExpand={toggleExpand}
              selected={selected} toggleSelect={toggleSelect} selCount={selCount}
              search={search} setSearch={setSearch}
            />
          ) : (
            <ConfigPanel
              cfg={cfg} setCfg={setCfg}
              outputs={outputs} toggleOutput={toggleOutput}
              analysis={analysis} toggleAnalysis={toggleAnalysis}
            />
          )}
        </div>

        {/* RIGHT: results */}
        <ResultsPanel
          activeSide={side}
          scopeTab={scopeTab} scopeSelected={selected} scopeSummary={scopeSummary}
          cfg={cfg} outputs={outputs} analysis={analysis}
          hasRun={hasRun} running={running} rows={rows}
        />
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);