/* ===== Right results panel ===== */
function ResultsPanel({ activeSide, scopeTab, scopeSelected, scopeSummary, cfg, outputs, analysis, hasRun, running, rows }) {
  const [tab, setTab] = React.useState("config");
  // jump to output tab when a run completes
  const prevRun = React.useRef(hasRun);
  React.useEffect(() => {
    if (hasRun && !prevRun.current) setTab("output");
    prevRun.current = hasRun;
  }, [hasRun]);

  const outList = Object.keys(outputs).filter((k) => outputs[k]);
  const anaList = Object.keys(analysis).filter((k) => analysis[k]);
  const scopeLabel = { portfolio: "Portfolio", product: "Product", riskfactor: "Risk Factor" }[scopeTab];

  return (
    <div className="card" style={{ minHeight: 660 }}>
      <div className="rtabs">
        <button className={"rtab" + (tab === "config" ? " on" : "")} onClick={() => setTab("config")}>
          Configuration
        </button>
        <button className={"rtab" + (tab === "output" ? " on" : "")} onClick={() => setTab("output")}>
          Run Output
          <span className={"badge" + (hasRun ? "" : " idle")}>{hasRun ? rows.length : 0}</span>
        </button>
      </div>

      <div className="rbody">
        {tab === "config" ? (
          <div className="fade-in">
            {/* Scope block */}
            <div className={"sum-block" + (activeSide === "scope" ? " active" : "")}>
              <div className="sum-bh">
                <span className="t"><Icon name="crosshair" size={15} style={{ color: "var(--navy)" }} />Scope Selection</span>
                {activeSide === "scope" && <span className="live">Editing</span>}
              </div>
              <div className="sum-body">
                <dl className="dl">
                  <dt>Scope type</dt><dd>{scopeLabel}</dd>
                  <dt>Selected factors</dt><dd>{scopeSummary.count}</dd>
                </dl>
                <div className="sum-sub">Selected groups</div>
                {scopeSummary.groups.length ? (
                  <div className="scope-sum-list">
                    {scopeSummary.groups.map((g) => (
                      <div className="scope-sum-item" key={g.name}>
                        <span className="nm">{g.name}</span>
                        <span className="ct">{g.count} selected</span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="tag-row"><span className="tag none">Nothing selected yet</span></div>
                )}
              </div>
            </div>

            {/* Config block */}
            <div className={"sum-block" + (activeSide === "config" ? " active" : "")}>
              <div className="sum-bh">
                <span className="t"><Icon name="wrench" size={14} style={{ color: "var(--green-700)" }} />Calculation Configuration</span>
                {activeSide === "config" && <span className="live">Editing</span>}
              </div>
              <div className="sum-body">
                <div className="sum-sub">Parameters</div>
                <dl className="dl">
                  <dt>Regulator</dt><dd>{cfg.regulator}</dd>
                  <dt>VaR Measure</dt><dd>{cfg.measure}</dd>
                  <dt>Valuation Approach</dt><dd>{cfg.valuation}</dd>
                  <dt>P&L Interpretation</dt><dd>{cfg.plInterp}</dd>
                  <dt>Holding Period</dt><dd>{cfg.holding}</dd>
                  {cfg.plInterp === "Exponential Weighted"
                    ? <><dt>Decay Factor</dt><dd>{cfg.decay}</dd></>
                    : <><dt>Percentile</dt><dd>{cfg.percentile}</dd></>}
                  <dt>Model Version</dt><dd>{cfg.modelVersion}</dd>
                  <dt>Time Series</dt><dd style={{ fontSize: 12 }}>{cfg.tsVersion}</dd>
                </dl>

                <div className="sum-sub">Risk Measure Output</div>
                <div className="tag-row">
                  {outList.length ? outList.map((o) => <span className="tag" key={o}>{o}</span>)
                    : <span className="tag none">No outputs selected</span>}
                </div>

                <div className="sum-sub">Risk Analysis</div>
                <div className="tag-row">
                  {anaList.length ? anaList.map((o) => <span className="tag" key={o}>{o}</span>)
                    : <span className="tag none">None</span>}
                </div>
              </div>
            </div>
          </div>
        ) : (
          <OutputTab hasRun={hasRun} running={running} rows={rows} cfg={cfg} outList={outList} />
        )}
      </div>
    </div>
  );
}

function OutputTab({ hasRun, running, rows, cfg, outList }) {
  if (running) {
    return (
      <div className="empty fade-in">
        <div className="ring"><span className="spinner" style={{ borderColor: "rgba(42,112,72,.3)", borderTopColor: "var(--green-700)", width: 24, height: 24 }} /></div>
        <h4>Running calculation…</h4>
        <p>Computing {cfg.measure} at {cfg.percentile} across the selected scope.</p>
      </div>
    );
  }
  if (!hasRun) {
    return (
      <div className="empty">
        <div className="ring"><Icon name="play" size={20} /></div>
        <h4>No results yet</h4>
        <p>Configure your scope and parameters, then</p>
        <p className="hint-run">press Run to compute risk measures.</p>
      </div>
    );
  }
  const typeClass = (t) => t === "Market Risk" ? "pt-market" : t === "Credit Risk" ? "pt-credit" : t === "Liquidity Risk" ? "pt-liq" : "pt-op";
  return (
    <div className="fade-in">
      <div className="out-head">
        <span className="out-title">VaR Risk <Icon name="info" size={15} style={{ color: "var(--muted-2)" }} /></span>
        <div style={{ display: "flex", gap: 12, color: "var(--muted-2)" }}>
          <Icon name="expand" size={16} style={{ cursor: "pointer" }} />
          <Icon name="dots" size={16} style={{ cursor: "pointer" }} />
        </div>
      </div>
      <div className="out-meta">
        <span className="m">Measure <b>{cfg.measure}</b></span>
        <span className="m">Level <b>{cfg.percentile}</b></span>
        <span className="m">Horizon <b>{cfg.holding}</b></span>
        <span className="m">Model <b>{cfg.modelVersion}</b></span>
        {outList.length > 0 && <span className="m">{outList.length} output{outList.length === 1 ? "" : "s"}</span>}
      </div>
      <div className="otable-wrap">
        <table className="otable">
          <thead>
            <tr>
              <th>COB</th><th>VaR Type</th><th>Model ID</th><th>Snapshot</th><th>VaR Level</th>
              <th>Type</th><th className="num">VaR Amount</th><th>VaR Date</th><th className="num">Expected Shortfall</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td>{r.cob}</td>
                <td>{r.type}</td>
                <td>{r.model}</td>
                <td>{r.snap}</td>
                <td>{r.level}</td>
                <td><span className={"pill-type " + typeClass(r.risk)}>{r.risk}</span></td>
                <td className="num strong">{fmtNum(r.am)}</td>
                <td>{r.date}</td>
                <td className="num">{fmtNum(r.es)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
window.ResultsPanel = ResultsPanel;