/* ============================================================
   SIKA COCKPIT — Drill-down ASIN (N1→N2→N3)
   ============================================================ */
const S = () => window.SIKA.SOURCES;

function Stat({ label, value, unit, nature, src, payload, big }) {
  return (
    <div className="kv">
      <span className="k">{label}{src && <Fresh src={src} compact />}</span>
      <span className="v" style={big ? { fontSize: 15 } : null}>
        {payload ? <Inspectable payload={payload}>{value}</Inspectable> : value}
        {unit && <span style={{ color: "var(--ink-4)", fontSize: 11 }}>{unit}</span>}
        {nature && <Nature kind={nature} />}
      </span>
    </div>
  );
}

// ---- Synthèse (vue décideur) -------------------------------------------
function TabSynthese({ a, A }) {
  const d = a.d;
  const next = a.d.nextPeak;
  return (
    <div>
      <div className={"banner " + (d.status === "red" ? "err" : d.status === "amber" ? "warn" : "ok")}>
        <Light level={d.status} />
        <span>
          {d.status === "red" && <><b>Rupture imminente.</b> {d.revenueAtRisk > 0 ? <>CA à risque <b>{eur(d.revenueAtRisk)}</b>. </> : null}Réappro avant le <b>{d.deadline ? d.deadline.toLocaleDateString("fr-FR") : "— dépassé"}</b>.</>}
          {d.status === "amber" && <><b>À surveiller.</b> Couverture nette {wks(d.coverageNet)}, sous le seuil de confort.</>}
          {d.status === "green" && <><b>Sain.</b> Couverture nette {wks(d.coverageNet)}.</>}
        </span>
      </div>

      <div className="panel" style={{ marginTop: 12 }}>
        <div className="panel-h"><span>Décision rapide</span><span>{a.cat}</span></div>
        <div className="panel-b">
          <Stat label="Couverture brute" big
            value={<Inspectable payload={inspectPayload({ a, label: "Couverture brute", value: wks(d.coverageGross), nature: "proxy", src: S().inventory, field: "sellableOnHandInventoryUnits / weeklyDemand", raw: { sellableOnHandInventoryUnits: a.onHand, weeklyDemandUnits: a.weeklyDemand, coverageWeeks: +d.coverageGross.toFixed(2) }, formula: <>couverture = <b>stock {a.onHand}</b> / <b>demande {a.weeklyDemand}/sem</b> = <span className="res">{d.coverageGross.toFixed(1)} sem</span></>, crumbs: ["Portefeuille", a.short, "Inventaire", "Couverture"] })}>{wks(d.coverageGross)}</Inspectable>}
            nature="proxy" src={S().inventory} />
          <Stat label="Couverture nette (PO entrant inclus)"
            value={<Inspectable payload={inspectPayload({ a, label: "Couverture nette", value: wks(d.coverageNet), nature: "proxy", src: S().inventory, field: "(onHand + openPO) / weeklyDemand", raw: { sellableOnHand: a.onHand, openPurchaseOrderUnits: a.openPO, weeklyDemand: a.weeklyDemand, coverageNetWeeks: +d.coverageNet.toFixed(2) }, formula: <>couv_nette = (<b>{a.onHand}</b> + <b>{a.openPO}</b>) / <b>{a.weeklyDemand}</b> = <span className="res">{d.coverageNet.toFixed(1)} sem</span></> })}>{wks(d.coverageNet)}</Inspectable>} />
          <Stat label="Demande hebdo" value={num(a.weeklyDemand)} unit=" u/sem" nature="estimé" src={S().forecast}
            payload={inspectPayload({ a, label: "Demande hebdo", value: num(a.weeklyDemand) + " u", nature: "estimé", src: S().forecast, field: "forecast.mean (semaine courante)", raw: { mean: a.weeklyDemand, p70: Math.round(a.weeklyDemand * 1.12), p80: Math.round(a.weeklyDemand * 1.27), p90: Math.round(a.weeklyDemand * 1.55), forecastGenerationDate: S().forecast.generatedAt }, formulaNote: "P70/P80/P90 = bornes de probabilité, pas des scénarios bas/moyen/haut." })} />
          <Stat label="Stock vendable" value={num(a.onHand)} unit=" u" nature="réel" src={S().inventory}
            payload={inspectPayload({ a, label: "Stock vendable", value: num(a.onHand) + " u", nature: "réel", src: S().inventory, field: "sellableOnHandInventoryUnits", raw: { sellableOnHandInventoryUnits: a.onHand, unsellableInventoryUnits: Math.round(a.onHand * 0.04), aged90PlusDaysSellableUnits: Math.round(a.onHand * 0.07), openPurchaseOrderUnits: a.openPO } })} />
          <Stat label="CA à risque" big nature="estimé" src={S().forecast}
            value={<span style={{ color: d.revenueAtRisk > 0 ? "var(--red)" : "var(--green)" }}><Inspectable payload={inspectPayload({ a, label: "CA à risque", value: eur(d.revenueAtRisk), nature: "estimé", src: S().forecast, field: "max(0, weeklyDemand×leadTime − onHand) × price", raw: { weeklyDemand: a.weeklyDemand, leadTimeWeeks_HYP: A.leadTime, onHand: a.onHand, priceProxy: a.price, revenueAtRisk: Math.round(d.revenueAtRisk), note: "borne basse — exclut l'érosion de Buy Box" }, formula: <>CA_risque = max(0, <b>{a.weeklyDemand}</b>×<b>{A.leadTime}</b> − <b>{a.onHand}</b>) × <b>{eur(a.price, 2)}</b> = <span className="res">{eur(d.revenueAtRisk)}</span></>, formulaNote: "Borne basse : n'inclut pas l'érosion durable de Buy Box.", crumbs: ["Portefeuille", a.short, "CA à risque"] })}>{eur(d.revenueAtRisk)}</Inspectable></span>} />
          <Stat label="Date limite de réappro" value={d.deadline ? d.deadline.toLocaleDateString("fr-FR") : "dépassé"}
            nature="hypothèse"
            payload={inspectPayload({ a, label: "Date limite de réappro", value: d.deadline ? d.deadline.toLocaleDateString("fr-FR") : "dépassé", nature: "hypothèse", src: S().inventory, field: "now + (coverageGross − buffer) semaines", raw: { coverageGrossWeeks: +d.coverageGross.toFixed(2), bufferWeeks_HYP: A.buffer, leadTimeWeeks_HYP: A.leadTime, deadline: d.deadline ? d.deadline.toISOString() : null } })} />
        </div>
      </div>

      {next && (
        <div className="panel">
          <div className="panel-h"><span>Pic saisonnier anticipé</span><Fresh src={S().forecast} compact /></div>
          <div className="panel-b">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="badge" style={{ borderColor: "var(--amber-bd)", color: "var(--amber)" }}>▲ {next.label}</span>
              <span style={{ fontSize: 12 }}>Demande prévue <b className="mono">{num(next.mean)} u</b> vs run-rate <b className="mono">{num(Math.round(d.runRate))} u</b> (+{Math.round((next.mean / d.runRate - 1) * 100)}%)</span>
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 8 }}>Pour couvrir ce pic, déclencher le PO ~{A.leadTime} sem avant, soit cette semaine si {next.wk <= A.leadTime}.</div>
          </div>
        </div>
      )}
    </div>
  );
}

// ---- Forecast (N3 + snapshots time-travel) -----------------------------
function TabForecast({ a }) {
  const [snap, setSnap] = useState("live");
  const series = a.forecast.slice(0, 24).map((f) => ({ label: f.label, v: f.mean, p70: f.p70, p80: f.p80, p90: f.p90, wk: f.wk }));
  const snapSeries = a.snapshot3w.map((s) => ({ label: s.label, v: s.predicted, realized: s.realized, wk: s.wk }));
  const d = a.d;
  return (
    <div>
      <div className="panel">
        <div className="panel-h"><span>Prévision de demande — 24 sem</span><Fresh src={S().forecast} /></div>
        <div className="panel-b">
          <SeriesChart series={series} bands valueLabel="u/sem" />
          <div className="legend">
            <span><i style={{ background: "var(--accent)" }}></i>mean</span>
            <span><i style={{ background: "var(--accent)", opacity: .4 }}></i>bande P70</span>
            <span><i style={{ background: "var(--accent)", opacity: .25 }}></i>P80</span>
            <span><i style={{ background: "var(--accent)", opacity: .15 }}></i>P90</span>
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 8 }}>
            P70/P80/P90 = <Nature kind="estimé" /> bornes de probabilité (≤ X% des cas), <b>pas</b> des scénarios bas/moyen/haut.
            <Inspectable payload={inspectPayload({ a, label: "Forecast (semaine +1)", value: num(series[0].v) + " u", nature: "estimé", src: S().forecast, field: "forecast[0]", raw: { forecastGenerationDate: S().forecast.generatedAt, week: series[0].label, mean: series[0].v, p70: series[0].p70, p80: series[0].p80, p90: series[0].p90 }, crumbs: ["Portefeuille", a.short, "Forecast", "Semaine", "Brut"] })}> · inspecter</Inspectable>
          </div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-h"><span>Time-travel — prévu (il y a 3 sem) vs réalisé</span>
          <div className="seg">
            {[["live", "Forecast actuel"], ["snap3", "Snapshot S-3"]].map(([v, l]) =>
              <button key={v} className={snap === v ? "on" : ""} onClick={() => setSnap(v)}>{l}</button>)}
          </div>
        </div>
        <div className="panel-b">
          <SeriesChart series={snapSeries} overlay="realized" overlayLabel="réalisé" markZeroWeek />
          <div className="legend">
            <span><i style={{ background: "var(--accent)" }}></i>prévu (snapshot S-3)</span>
            <span><i style={{ background: "var(--ink-3)" }}></i>réalisé</span>
            <span style={{ color: "var(--ink-4)" }}>│ aujourd'hui</span>
          </div>
          <div className="kv" style={{ marginTop: 10 }}>
            <span className="k">Fiabilité mesurée (MAPE sur réalisé)</span>
            <span className="v" style={{ color: d.mape > 50 ? "var(--red)" : d.mape > 30 ? "var(--amber)" : "var(--green)" }}>
              <Inspectable payload={inspectPayload({ a, label: "Fiabilité forecast (MAPE)", value: pct(d.mape, 0), nature: "estimé", src: S().forecast, field: "mean(|prévu−réalisé|/réalisé) sur snapshots", raw: { snapshots: a.snapshot3w.filter(s => s.realized != null), mapePct: +d.mape.toFixed(1), note: "Forecast Amazon souvent faux de 30–80% ; pas d'historique requêtable → snapshots Sika." } })}>{d.mape != null ? pct(d.mape, 0) : "—"}</Inspectable>
              <Nature kind="estimé" />
            </span>
          </div>
          <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 6 }}>Le forecast Amazon n'a pas d'historique requêtable : Sika archive un snapshot chaque semaine pour mesurer la dérive.</div>
        </div>
      </div>
    </div>
  );
}

window.TabSynthese = TabSynthese;
window.TabForecast = TabForecast;
window.DD_Stat = Stat;