/* ============================================================
   SIKA COCKPIT — N0 Portefeuille : KPIs + tableau ASIN dense
   ============================================================ */
function KpiStrip({ port, A, filter, setFilter, freshnessWorst }) {
  const { bind } = useTip();
  const items = [
    { id: "risk", label: "CA à risque total", val: eur(port.risk), sub: <><Nature kind="estimé" /> borne basse</>, color: "var(--red)",
      tip: <>Somme de max(0, demande×lead − stock)×prix sur tous les ASIN. <b>Borne basse</b> : exclut l'érosion de Buy Box.</> },
    { id: "status", label: "ASIN rouges / orange", val: <><span style={{ color: "var(--red)" }}>{port.red}</span><span style={{ color: "var(--ink-4)", fontSize: 16 }}>/</span><span style={{ color: "var(--amber)" }}>{port.amber}</span></>, sub: "feux supply", color: "var(--ink)",
      tip: <>Feux calculés sur couverture nette vs lead+buffer ({A.leadTime}+{A.buffer} sem).</> },
    { id: "peaks", label: "Pics ≤" + A.horizon + " sem", val: port.peaks, sub: <>seuil +{A.peakThreshold}%</>, color: "var(--amber)",
      tip: <>Semaines de forecast au-dessus du run-rate +{A.peakThreshold}% sur l'horizon.</> },
    { id: "comp", label: "Opport. / menaces", val: <><span style={{ color: "var(--green)" }}>{port.opp}</span><span style={{ color: "var(--ink-4)", fontSize: 16 }}>/</span><span style={{ color: "var(--red)" }}>{port.threat}</span></>, sub: "concurrence (Keepa)", color: "var(--ink)",
      tip: <>Opportunités (rupture concurrente) vs menaces (Buy Box perdue / prix cassé 3P).</> },
    { id: "po", label: "Acceptation PO", val: pct(port.acceptRate, 0), sub: <>seuil 80% · perte {eurK(port.cancelLoss)}</>, color: port.acceptRate >= 80 ? "var(--green)" : "var(--amber)",
      tip: <>Unités acceptées / commandées. Sous 80% = signal. CA perdu annulations : {eur(port.cancelLoss)}.</> },
    { id: "fresh", label: "Fraîcheur globale", val: freshnessWorst.label, sub: <>pire source · SLA</>, color: freshnessWorst.color,
      tip: <>Donnée la plus ancienne du cockpit : forecast (71 h). Real-time à 5 min pour ventes/stock.</> },
  ];
  return (
    <div className="kpis">
      {items.map((k) => (
        <div key={k.id} className={"kpi" + (filter === k.id ? " sel" : "")} onClick={() => setFilter(filter === k.id ? null : k.id)} {...bind(k.tip)}>
          <div className="kpi-label">{k.label}</div>
          <div className="kpi-val tnum" style={{ color: k.color }}>{k.val}</div>
          <div className="kpi-sub">{k.sub}</div>
          <span className="drill-hint">⤢</span>
        </div>
      ))}
    </div>
  );
}

const COMP = { menace: { c: "var(--red)", b: "var(--red-bd)", t: "Menace" }, opportunite: { c: "var(--green)", b: "var(--green-bd)", t: "Opportunité" }, neutre: { c: "var(--ink-3)", b: "var(--line-2)", t: "Stable" } };
const POS = { confirme: { c: "var(--green)", b: "var(--green-bd)", t: "Confirmé" }, rejet_partiel: { c: "var(--amber)", b: "var(--amber-bd)", t: "Rejet partiel" }, annule: { c: "var(--red)", b: "var(--red-bd)", t: "Annulé" } };

function covColor(w, A) { return w < A.leadTime + A.buffer ? "var(--red)" : w < A.leadTime + A.buffer + 3 ? "var(--amber)" : "var(--green)"; }

function AsinTable({ rows, A, onPick, activeAsin, sort, setSort }) {
  const arrow = (k) => sort.k === k ? <span className="arrow">{sort.dir > 0 ? "↑" : "↓"}</span> : null;
  const Th = ({ k, children, l }) => <th className={l ? "l" : ""} onClick={() => setSort({ k, dir: sort.k === k ? -sort.dir : 1 })}>{children}{arrow(k)}</th>;
  return (
    <div className="tablewrap">
      <table className="grid">
        <thead>
          <tr>
            <th style={{ width: 26 }}></th>
            <Th k="title" l>ASIN · Produit</Th>
            <Th k="covG">Couv. brute</Th>
            <Th k="covN">Couv. nette</Th>
            <Th k="dem">Dem/sem</Th>
            <Th k="stock">Stock</Th>
            <Th k="risk">CA à risque</Th>
            <Th k="deadline">Date limite</Th>
            <Th k="price">Prix</Th>
            <Th k="margin">Marge</Th>
            <Th k="comp">Concurrence</Th>
            <Th k="po">PO</Th>
          </tr>
        </thead>
        <tbody>
          {rows.map((a) => {
            const d = a.d;
            const comp = COMP[a.compStatus], po = POS[a.poStatus];
            return (
              <tr key={a.asin} className={activeAsin === a.asin ? "active" : ""} onClick={() => onPick(a)}>
                <td style={{ textAlign: "center" }}><Light level={d.status} title={a.short} /></td>
                <td className="l">
                  <div className="cell-title">{a.short}</div>
                  <div className="cell-asin">{a.asin} · {a.cat}</div>
                </td>
                <td className="tnum">
                  <Inspectable payload={inspectPayload({ a, label: "Couverture brute", value: wks(d.coverageGross), nature: "proxy", src: window.SIKA.SOURCES.inventory, field: "onHand / weeklyDemand", raw: { onHand: a.onHand, weeklyDemand: a.weeklyDemand, coverageWeeks: +d.coverageGross.toFixed(2) }, formula: <>= {a.onHand}/{a.weeklyDemand} = <span className="res">{d.coverageGross.toFixed(1)} sem</span></>, crumbs: ["Portefeuille", a.short, "Inventaire", "Couverture"] })}>
                    <span style={{ color: covColor(d.coverageGross, A) }}>{num(d.coverageGross, 1)}</span>
                  </Inspectable>
                  <span className="cov-bar"><i style={{ width: Math.min(100, d.coverageGross / 12 * 100) + "%", background: covColor(d.coverageGross, A) }}></i></span>
                </td>
                <td className="tnum" style={{ color: covColor(d.coverageNet, A) }}>{num(d.coverageNet, 1)}</td>
                <td className="tnum">{num(a.weeklyDemand)} <Nature kind="estimé" /></td>
                <td className="tnum">{num(a.onHand)}</td>
                <td className="tnum">
                  <Inspectable payload={inspectPayload({ a, label: "CA à risque", value: eur(d.revenueAtRisk), nature: "estimé", src: window.SIKA.SOURCES.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) }, formula: <>max(0, {a.weeklyDemand}×{A.leadTime} − {a.onHand}) × {eur(a.price, 2)} = <span className="res">{eur(d.revenueAtRisk)}</span></>, crumbs: ["Portefeuille", a.short, "CA à risque"] })}>
                    <b style={{ color: d.revenueAtRisk > 0 ? "var(--red)" : "var(--ink-4)" }}>{d.revenueAtRisk > 0 ? eur(d.revenueAtRisk) : "—"}</b>
                  </Inspectable>
                </td>
                <td className="tnum" style={{ color: d.deadline ? (d.weeksToFloor < 2 ? "var(--red)" : "var(--ink-2)") : "var(--red)" }}>
                  {d.deadline ? d.deadline.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit" }) : "dépassé"}
                </td>
                <td className="tnum">{eur(a.price, 2)} <Nature kind="proxy" /></td>
                <td className="tnum">{pct(a.netMargin, 0)} <Nature kind="estimé" /></td>
                <td><span className="badge" style={{ borderColor: comp.b, color: comp.c }}>{a.compStatus === "menace" ? "▼" : a.compStatus === "opportunite" ? "▲" : "■"} {comp.t}</span></td>
                <td><span className="badge" style={{ borderColor: po.b, color: po.c }}>{po.t}</span></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
window.KpiStrip = KpiStrip;
window.AsinTable = AsinTable;
window.covColor = covColor;