/* ===== Calculation Config side ===== */
function Field({ label, required, children, disabled, hint }) {
  return (
    <div className={"field" + (disabled ? " disabled" : "")}>
      <label>{label}{required && <span className="req"> *</span>}</label>
      {children}
      {hint && <span className="field-hint">{hint}</span>}
    </div>
  );
}
function Select({ value, onChange, options, disabled }) {
  return (
    <select className="sel" value={value} disabled={disabled} onChange={(e) => onChange(e.target.value)}>
      {options.map((o) => <option key={o} value={o}>{o}</option>)}
    </select>
  );
}
function ISeg({ value, onChange, options }) {
  return (
    <div className="iseg">
      {options.map((o) => (
        <button key={o} className={value === o ? "on" : ""} onClick={() => onChange(o)}>{o}</button>
      ))}
    </div>
  );
}
function Chip({ label, on, onClick }) {
  return (
    <button className={"chip" + (on ? " on" : "")} onClick={onClick}>
      <span className="tick">{on && <Icon name="check" size={10} sw={3.2} />}</span>
      {label}
    </button>
  );
}

function ConfigPanel({ cfg, setCfg, outputs, toggleOutput, analysis, toggleAnalysis }) {
  const set = (k) => (v) => setCfg((c) => ({ ...c, [k]: v }));
  const isExpWeighted = cfg.plInterp === "Exponential Weighted";
  const isPercentile = cfg.plInterp === "Percentile" || cfg.plInterp === "Expected Shortfall";

  return (
    <div className="config-scroll fade-in">
      {/* 1. Calculation parameters */}
      <div className="cfg-section">
        <div className="cfg-head"><span className="bar"></span>VaR Risk Calculation Parameter</div>
        <div className="field-grid">
          <Field label="Regulator" required>
            <Select value={cfg.regulator} onChange={set("regulator")} options={OPT.regulator} />
          </Field>
          <Field label="VaR Measure" required>
            <Select value={cfg.measure} onChange={set("measure")} options={OPT.measure} />
          </Field>
          <Field label="Valuation Approach">
            <ISeg value={cfg.valuation} onChange={set("valuation")} options={OPT.valuation} />
          </Field>
          <Field label="Holding Period">
            <ISeg value={cfg.holding} onChange={set("holding")} options={OPT.holding} />
          </Field>
          <Field label="VaR P&L Interpretation" required>
            <Select value={cfg.plInterp} onChange={set("plInterp")} options={OPT.plInterp} />
          </Field>
          <Field
            label="Decay Factor"
            disabled={!isExpWeighted}
            hint={isExpWeighted ? "Range (0, 1] · 1 = equal weight" : "Only for Exponential Weighted"}
          >
            <input
              className="txt" type="number" step="0.01" min="0" max="1"
              value={cfg.decay} disabled={!isExpWeighted}
              onChange={(e) => set("decay")(e.target.value)}
            />
          </Field>
          <Field label="Percentile" disabled={!isPercentile} hint={!isPercentile ? "N/A for Exponential Weighted" : null}>
            <Select value={cfg.percentile} onChange={set("percentile")} options={OPT.percentile} disabled={!isPercentile} />
          </Field>
          <Field label="VaR Model Version">
            <ISeg value={cfg.modelVersion} onChange={set("modelVersion")} options={OPT.modelVersion} />
          </Field>
          <Field label="Time Series Version" full>
            <Select value={cfg.tsVersion} onChange={set("tsVersion")} options={OPT.tsVersion} />
          </Field>
        </div>
      </div>

      {/* 2. Risk Measure Output */}
      <div className="cfg-section">
        <div className="cfg-head"><span className="bar"></span>Risk Measure Output</div>
        <div className="chip-group">
          <div className="gl">VaR / SVaR</div>
          <div className="chips">
            {OPT.outVarSvar.map((o) => <Chip key={o} label={o} on={!!outputs[o]} onClick={() => toggleOutput(o)} />)}
          </div>
        </div>
        <div className="chip-group">
          <div className="gl">VaR Impact</div>
          <div className="chips">
            {OPT.outImpact.map((o) => <Chip key={o} label={o} on={!!outputs[o]} onClick={() => toggleOutput(o)} />)}
          </div>
        </div>
        <div className="chip-group" style={{ marginBottom: 0 }}>
          <div className="gl">Analysis</div>
          <div className="chips">
            {OPT.outAnalysis.map((o) => <Chip key={o} label={o} on={!!outputs[o]} onClick={() => toggleOutput(o)} />)}
          </div>
        </div>
      </div>

      {/* 3. Risk Analysis */}
      <div className="cfg-section">
        <div className="cfg-head"><span className="bar"></span>Risk Analysis</div>
        <div className="check-list">
          {OPT.riskAnalysis.map((o) => {
            const on = !!analysis[o];
            return (
              <button key={o} className={"check-row" + (on ? " on" : "")} onClick={() => toggleAnalysis(o)}>
                <span className={"cb" + (on ? " checked" : "")}>{on && <Icon name="check" size={11} sw={3} />}</span>
                {o}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}
window.ConfigPanel = ConfigPanel;