/* ============================================================
   SIKA COCKPIT — Data Inspector (N4) : du KPI au champ JSON brut
   Ouvrable depuis n'importe quelle cellule via window.SikaUI.inspect()
   ============================================================ */
function DataInspector({ payload, onClose }) {
  if (!payload) return null;
  const { bind } = useTip();
  const src = payload.source || {};
  const crumbs = payload.crumbs || ["Portefeuille"];

  function exportJSON() {
    const blob = new Blob([JSON.stringify(payload.raw, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = (payload.field || "champ") + ".json"; a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div className="overlay" onClick={onClose}>
      <div className="inspector" onClick={(e) => e.stopPropagation()}>
        <div className="insp-h">
          <span className="chip-act">DATA INSPECTOR · N4</span>
          <span style={{ fontWeight: 600, fontSize: 13 }}>{payload.label}</span>
          {payload.nature && <Nature kind={payload.nature} />}
          <button className="x" onClick={onClose}>×</button>
        </div>
        <div className="insp-b">
          {/* fil d'ariane des niveaux */}
          <div className="crumbs">
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                <span className={"n" + (i === crumbs.length - 1 ? " cur" : "")}>{["N0", "N1", "N2", "N3", "N4"][i]} · {c}</span>
                {i < crumbs.length - 1 && <span>›</span>}
              </React.Fragment>
            ))}
          </div>

          {/* valeur résolue */}
          <div className="panel">
            <div className="panel-h"><span>Valeur résolue</span>{src.nature && <Fresh src={src} />}</div>
            <div className="panel-b">
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                <span className="mono" style={{ fontSize: 26, fontWeight: 600 }}>{payload.value}</span>
                {payload.unit && <span style={{ color: "var(--ink-3)" }}>{payload.unit}</span>}
              </div>
              {payload.asin && (
                <div style={{ marginTop: 6, fontSize: 11.5, color: "var(--ink-3)" }} className="mono">
                  ASIN {payload.asin}{payload.sku ? " · " + payload.sku : ""}
                </div>
              )}
            </div>
          </div>

          {/* formule si dérivée */}
          {payload.formula && (
            <div className="panel">
              <div className="panel-h"><span>Formule & hypothèses</span><span style={{ color: "var(--ink-4)" }}>recalculé en direct</span></div>
              <div className="panel-b"><Formula>{payload.formula}</Formula>
                {payload.formulaNote && <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 8 }}>{payload.formulaNote}</div>}
              </div>
            </div>
          )}

          {/* provenance */}
          <div className="panel">
            <div className="panel-h"><span>Provenance</span></div>
            <div className="panel-b">
              <div className="kv"><span className="k">Rapport / source</span><span className="v">{src.report || "—"}</span></div>
              <div className="kv"><span className="k">Endpoint</span><span className="v">{src.endpoint || "—"}</span></div>
              <div className="kv"><span className="k">Généré le</span><span className="v">{src.generatedAt ? new Date(src.generatedAt).toLocaleString("fr-FR") : "—"}</span></div>
              <div className="kv"><span className="k">Âge / SLA</span><span className="v"><span className={"fresh " + freshClass(src.ageHours)}><span className="dot"></span>{ageLabel(src.ageHours)}</span><span style={{ color: "var(--ink-4)" }}>/ {src.sla || "—"}</span></span></div>
              <div className="kv"><span className="k">Nature</span><span className="v">{src.nature ? <Nature kind={src.nature} /> : "—"}</span></div>
            </div>
          </div>

          {/* JSON brut */}
          {payload.raw && (
            <div className="panel">
              <div className="panel-h"><span>Champ source — ligne de rapport brute</span>
                <button className="tb-btn" style={{ padding: "2px 8px", fontSize: 11 }} onClick={exportJSON}>↓ JSON</button>
              </div>
              <div className="panel-b">
                <pre className="json" dangerouslySetInnerHTML={{ __html: hl(payload.raw) }}></pre>
                {payload.field && <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 8 }} className="mono">champ&nbsp;: <span style={{ color: "var(--accent)" }}>{payload.field}</span></div>}
              </div>
            </div>
          )}

          <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
            <button className="tb-btn" onClick={exportJSON}>↓ Exporter ce champ (JSON)</button>
            <button className="tb-btn" {...bind(<span>Ouvrirait la requête SP-API exacte avec ce filtre.</span>)}>⎘ Voir la requête API</button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.DataInspector = DataInspector;