/* ============================================================
   SIKA COCKPIT — Shell du tiroir drill-down (assemble les onglets)
   ============================================================ */
function TabTrafic({ a }) {
  const ser = a.traffic.map((t) => ({ label: t.label, v: t.glanceViews, wk: t.wk }));
  const last = a.traffic[a.traffic.length - 1];
  const convSer = a.traffic.map((t) => ({ label: t.label, v: t.conversion, wk: t.wk }));
  const hole = last.conversion < 9 && last.glanceViews > a.weeklyDemand * 18;
  return (
    <div>
      {hole && <div className="banner warn" style={{ marginBottom: 12 }}><span>⚠︎</span><span><b>Trou de conversion</b> — trafic élevé ({num(last.glanceViews)} vues) mais conversion faible ({pct(last.conversion, 1)}). Vérifier prix, contenu, disponibilité.</span></div>}
      <div className="panel">
        <div className="panel-h"><span>Glance Views — 26 sem</span><Fresh src={S().traffic} /></div>
        <div className="panel-b"><SeriesChart series={ser} color="var(--accent)" valueLabel="vues" />
          <div style={{ fontSize: 10.5, color: "var(--ink-4)", marginTop: 8 }}>Glance Views API ≠ chiffres du dashboard Vendor Central (méthodo différente).</div>
        </div>
      </div>
      <div className="panel">
        <div className="panel-h"><span>Conversion = ventes / vues</span></div>
        <div className="panel-b"><SeriesChart series={convSer} color="var(--accent-2)" valueLabel="%" h={120} />
          {window.DD_Stat({ label: "Conversion (sem)", value: pct(last.conversion, 1), nature: "proxy", src: S().traffic, payload: inspectPayload({ a, label: "Conversion", value: pct(last.conversion, 1), nature: "proxy", src: S().traffic, field: "shippedUnits / glanceViews", raw: { glanceViews: last.glanceViews, conversionPct: last.conversion, hourlyGlanceViews_realtime: "disponible (65–115 min)" }, crumbs: ["Portefeuille", a.short, "Trafic", last.label, "Brut"] }) })}
          {window.DD_Stat({ label: "Glance Views (sem)", value: num(last.glanceViews), nature: "réel", src: S().traffic })}
        </div>
      </div>
    </div>
  );
}

function TabMarge({ a }) {
  const net = a.netMargin;
  const raw = { netPureProductMarginPct: net, contraCogsApprox: +(a.price * 0.06).toFixed(2), salesDiscount: +(a.price * 0.03).toFixed(2), note: "Net PPM = estimé, contraCogs approximé" };
  return (
    <div>
      <div className="panel">
        <div className="panel-h"><span>Marge nette (Net PPM)</span><Fresh src={S().margin} /></div>
        <div className="panel-b">
          {window.DD_Stat({ label: "Net PPM %", value: pct(net, 1), nature: "estimé", src: S().margin, payload: inspectPayload({ a, label: "Net Pure Product Margin", value: pct(net, 1), nature: "estimé", src: S().margin, field: "netPureProductMargin", raw, crumbs: ["Portefeuille", a.short, "Marge", "Brut"] }) })}
          {window.DD_Stat({ label: "Contra-COGS (approx.)", value: eur(raw.contraCogsApprox, 2), nature: "estimé", src: S().margin })}
          {window.DD_Stat({ label: "Sales discount", value: eur(raw.salesDiscount, 2), nature: "estimé", src: S().margin })}
          {window.DD_Stat({ label: "Marge € / unité (proxy)", value: eur(a.price * net / 100, 2), nature: "proxy", src: S().margin })}
        </div>
      </div>
      <div style={{ fontSize: 10.5, color: "var(--ink-4)" }}>Net PPM rafraîchi hebdo (âge {ageLabel(S().margin.ageHours)}). Priorisation par marge = fonctionnalité « low » du périmètre.</div>
    </div>
  );
}

const TABS = [
  ["synthese", "Synthèse", (p) => <TabSynthese {...p} />],
  ["forecast", "Forecast", (p) => <TabForecast {...p} />],
  ["ventes", "Ventes", (p) => <TabVentes {...p} />],
  ["inventaire", "Inventaire", (p) => <TabInventaire {...p} />],
  ["trafic", "Trafic", (p) => <TabTrafic {...p} />],
  ["marge", "Marge", (p) => <TabMarge {...p} />],
  ["po", "PO", (p) => <TabPO {...p} />],
  ["conc", "Concurrence", (p) => <TabConcurrence {...p} />],
  ["brand", "Demande amont", (p) => <TabBrand {...p} />],
];

function Drawer({ a, A, open, onClose }) {
  const [tab, setTab] = useState("synthese");
  useEffect(() => { setTab("synthese"); }, [a && a.asin]);
  if (!a) return <div className="drawer" style={{ flexBasis: open ? 620 : 0, width: 620 }}></div>;
  const d = a.d;
  const render = (TABS.find((t) => t[0] === tab) || TABS[0])[2];
  return (
    <div className="drawer" style={{ flexBasis: open ? 620 : 0, width: 620 }}>
      <div className="drawer-head">
        <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
          <Light level={d.status} title={a.short} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 13.5, lineHeight: 1.3 }}>{a.short}</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 3, display: "flex", gap: 8, flexWrap: "wrap" }}>
              <span>{a.asin}</span><span>·</span><span>{a.sku}</span><span>·</span><span>EAN {a.ean}</span>
            </div>
          </div>
          <button className="x" style={{ background: "none", border: 0, color: "var(--ink-3)", fontSize: 19, lineHeight: 1 }} onClick={onClose}>×</button>
        </div>
        <div style={{ display: "flex", gap: 14, marginTop: 10, fontSize: 11 }}>
          <span style={{ color: "var(--ink-3)" }}>Couv. nette <b className="mono" style={{ color: "var(--ink)" }}>{wks(d.coverageNet)}</b></span>
          <span style={{ color: "var(--ink-3)" }}>CA risque <b className="mono" style={{ color: d.revenueAtRisk > 0 ? "var(--red)" : "var(--green)" }}>{eurK(d.revenueAtRisk)}</b></span>
          <span style={{ color: "var(--ink-3)" }}>Prix <b className="mono" style={{ color: "var(--ink)" }}>{eur(a.price, 2)}</b> <Nature kind="proxy" /></span>
        </div>
      </div>
      <div className="tabs">
        {TABS.map(([id, label]) => (
          <button key={id} className={tab === id ? "on" : ""} onClick={() => setTab(id)}>
            {label}{id === "brand" && <span style={{ color: "var(--amber)", marginLeft: 4 }}>⊘</span>}
          </button>
        ))}
      </div>
      <div className="drawer-body">{render({ a, A })}</div>
    </div>
  );
}
window.Drawer = Drawer;