/* ============================================================
   SIKA COCKPIT — Panneau d'hypothèses éditables (recalcul live)
   ============================================================ */
function AssumptionsPanel({ A, setA, port, open, onClose }) {
  const ctrl = (key, label, min, max, step, unit, hint) => (
    <div className="ctrl">
      <label>{label}<b>{A[key]}{unit}</b></label>
      <input type="range" min={min} max={max} step={step} value={A[key]}
        onChange={(e) => setA(Object.assign({}, A, { [key]: +e.target.value }))} />
      <div className="hint">{hint}</div>
    </div>
  );
  return (
    <div className="assume" style={{ flexBasis: open ? 340 : 0, width: 340 }}>
      <div className="drawer-head" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontWeight: 600, fontSize: 13 }}>Hypothèses & paramètres</div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>Recalcule tout le portefeuille en direct</div>
        </div>
        <button className="x" style={{ background: "none", border: 0, color: "var(--ink-3)", fontSize: 18 }} onClick={onClose}>×</button>
      </div>
      <div className="drawer-body">
        <div className="banner warn" style={{ marginBottom: 14 }}>
          <span>⚠︎</span><span>Ces réglages sont des <b>hypothèses Sika</b>, pas des données Amazon. Marqués <Nature kind="hypothèse" /> partout où ils interviennent.</span>
        </div>

        {ctrl("leadTime", "Délai de réappro", 1, 12, 1, " sem", "Temps entre déclenchement d'un PO et stock vendable. Hypothèse Sika.")}
        {ctrl("buffer", "Stock de sécurité", 0, 8, 0.5, " sem", "Marge tampon sous laquelle on déclenche l'alerte.")}
        {ctrl("peakThreshold", "Seuil de pic", 10, 100, 5, " %", "Au-dessus du run-rate, une semaine de forecast est un « pic ».")}
        {ctrl("horizon", "Horizon de projection", 4, 48, 1, " sem", "Fenêtre de calcul du CA à risque et de détection des pics.")}

        <div className="ctrl">
          <label style={{ marginBottom: 8 }}>Base de calcul des ventes</label>
          <div className="seg" style={{ width: "100%" }}>
            {[["shipped", "Shipped (facturé)"], ["ordered", "Ordered (annulable)"]].map(([v, l]) => (
              <button key={v} className={A.salesBasis === v ? "on" : ""} style={{ flex: 1, justifyContent: "center" }}
                onClick={() => setA(Object.assign({}, A, { salesBasis: v }))}>{l}</button>
            ))}
          </div>
          <div className="hint">ordered = commandé par Amazon (annulable) · shipped = expédié/facturé. Change la lecture des séries de ventes.</div>
        </div>

        <div className="panel" style={{ marginTop: 6 }}>
          <div className="panel-h"><span>Formules appliquées</span></div>
          <div className="panel-b" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <Formula>couverture_nette = (<b>stock</b> + <b>PO_entrant</b>) / <b>demande_hebdo</b></Formula>
            <Formula>feu = rouge si couv_nette &lt; <b>{A.leadTime}+{A.buffer}</b> · orange si &lt; <b>{A.leadTime + A.buffer + 3}</b> · sinon vert</Formula>
            <Formula>CA_à_risque = max(0, <b>demande_hebdo</b>×<b>{A.leadTime}</b> − <b>stock</b>) × <b>prix</b><br /><span className="res">= {eur(port.risk)}</span> sur le portefeuille</Formula>
          </div>
        </div>

        <div className="panel">
          <div className="panel-h"><span>Impact en direct</span></div>
          <div className="panel-b">
            <div className="kv"><span className="k">CA à risque total</span><span className="v" style={{ color: "var(--red)" }}>{eur(port.risk)}</span></div>
            <div className="kv"><span className="k">ASIN rouges / orange</span><span className="v"><span style={{ color: "var(--red)" }}>{port.red}</span> / <span style={{ color: "var(--amber)" }}>{port.amber}</span></span></div>
            <div className="kv"><span className="k">Pics détectés (≤{A.horizon} sem)</span><span className="v">{port.peaks}</span></div>
          </div>
        </div>

        <button className="tb-btn" style={{ width: "100%", justifyContent: "center", marginTop: 4 }}
          onClick={() => setA(Object.assign({}, window.SIKA.DEFAULT_ASSUMPTIONS))}>↺ Réinitialiser les hypothèses</button>
        <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 10, lineHeight: 1.5 }}>
          CA à risque = <b style={{ color: "var(--ink-3)" }}>borne basse</b> : n'inclut pas l'érosion durable de Buy Box ni les ruptures concurrentes. À lire comme un plancher.
        </div>
      </div>
    </div>
  );
}
window.AssumptionsPanel = AssumptionsPanel;