// update_sbom.jsx — modal to update an existing component's SBOM.
// Two paths: edit the inventory inline, or upload a new CycloneDX scan. On apply
// the component is re-matched and any CVE that matched before but no longer does
// (library removed or upgraded past its fix) is reported as remediated.

function UpdateSbomModal({ comp, onClose, onApply }) {
  const [mode, setMode] = useState("edit");          // edit | upload
  const [parsing, setParsing] = useState(false);
  const [libs, setLibs] = useState(() => comp.libs.map((l, i) => ({ ...l, _id: "u" + i })));

  const baseMatches = useMemo(() => window.VC.correlateSbom(comp.libs), [comp]);
  const newMatches = useMemo(() => window.VC.correlateSbom(libs), [libs]);
  const baseIds = useMemo(() => new Set(baseMatches.map(m => m.vuln.id)), [baseMatches]);
  const newIds = useMemo(() => new Set(newMatches.map(m => m.vuln.id)), [newMatches]);
  const remediated = baseMatches.filter(m => !newIds.has(m.vuln.id));
  const added = newMatches.filter(m => !baseIds.has(m.vuln.id));

  const strip = (arr) => arr.map(({ _id, ...l }) => l);
  const dirty = JSON.stringify(strip(libs)) !== JSON.stringify(comp.libs);

  function uploadNew() {
    setParsing(true);
    setTimeout(() => {
      const next = window.VC.simulateUpdatedSbom(comp.libs).map((l, i) => ({ ...l, _id: "u" + i }));
      setLibs(next); setParsing(false); setMode("edit");
    }, 800);
  }

  function apply() {
    onApply({ libs: strip(libs), remediatedIds: remediated.map(m => m.vuln.id) });
  }

  return (
    <div className="usm-scrim" onClick={onClose}>
      <div className="usm" onClick={e => e.stopPropagation()}>
        <div className="usm-head">
          <div>
            <span className="eyebrow">Update SBOM</span>
            <h3>{comp.name}</h3>
          </div>
          <button className="iconbtn" onClick={onClose} title="Close"><Icon name="close" size={16} /></button>
        </div>

        <div className="usm-tabs">
          <button className={"seg-btn" + (mode === "edit" ? " is-on" : "")} onClick={() => setMode("edit")}><Icon name="pencil" size={14} />Edit inline</button>
          <button className={"seg-btn" + (mode === "upload" ? " is-on" : "")} onClick={() => setMode("upload")}><Icon name="upload" size={14} />Upload new file</button>
        </div>

        <div className="usm-body">
          {parsing ? (
            <div className="drop is-parsing"><span className="btn-spin drop-spin" /><strong>Parsing updated scan…</strong>
              <span className="drop-sub">Re-resolving components · diffing against last match</span></div>
          ) : mode === "upload" ? (
            <div className="drop">
              <span className="drop-ic"><Icon name="upload" size={26} /></span>
              <strong>Upload an updated CycloneDX or SPDX scan</strong>
              <span className="drop-sub">Accepts <b>.cdx.json</b>, <b>.cdx.xml</b> and <b>.spdx.json</b> · replaces the current inventory</span>
              <div className="drop-actions">
                <button className="btn btn-accent" onClick={uploadNew}><Icon name="doc" size={14} />Load updated scan (JSON)</button>
                <button className="btn" onClick={uploadNew}><Icon name="doc" size={14} />Load updated scan (XML)</button>
              </div>
            </div>
          ) : (
            <SbomEditor value={libs} onChange={setLibs} embedded />
          )}
        </div>

        <div className="usm-impact">
          <div className="usm-impact-stats">
            <span className="usm-stat"><b className={newMatches.length < baseMatches.length ? "is-good" : ""}>{newMatches.length}</b> matches now
              <em>was {baseMatches.length}</em></span>
            <span className="usm-pill usm-pill-good"><Icon name="check" size={13} />{remediated.length} to remediate</span>
            {added.length > 0 && <span className="usm-pill usm-pill-warn"><Icon name="alert" size={13} />{added.length} new</span>}
          </div>
          {remediated.length > 0 && (
            <div className="usm-remlist">
              {remediated.map(m => (
                <span className="usm-remchip" key={m.vuln.id}><span className={"chip-dot " + sevClass(m.vuln.severity)} />{m.vuln.id}</span>
              ))}
            </div>
          )}
        </div>

        <div className="usm-foot">
          <span className="usm-foot-note">{dirty ? "Re-matching will run on apply." : "No changes yet."}</span>
          <span className="wiz-foot-sp" />
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-accent" disabled={!dirty} onClick={apply}><Icon name="refresh" size={15} />Apply &amp; re-match</button>
        </div>
      </div>
    </div>
  );
}

window.UpdateSbomModal = UpdateSbomModal;