// Compare the wsids the user pasted (input order, deduped) against the wsids
// in WORKSHOP_ITEMS_LINE (sort order). Always available - no "previous sort"
// required. Surfaces drops (banned / missing mod.info / unknown / collection
// IDs that expanded), additions (collection expansion, branch picks), and
// position changes.
function computeDiff(inputWsids, outputWsids) {
  if (!inputWsids || !outputWsids) return null;
  const inSet  = new Set(inputWsids);
  const outSet = new Set(outputWsids);
  const added   = outputWsids.filter(w => !inSet.has(w));
  const removed = inputWsids.filter(w => !outSet.has(w));
  const inPos = new Map(inputWsids.map((w, i) => [w, i]));
  const movers = [];
  outputWsids.forEach((w, oi) => {
    if (!inSet.has(w)) return;
    const ii = inPos.get(w);
    if (ii !== oi) movers.push({ wsid: w, from: ii, to: oi, delta: oi - ii });
  });
  movers.sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta));
  return { added, removed, movers };
}

function DiffPanel({ inputWsids, outputWsids, onClose }) {
  const diff = computeDiff(inputWsids, outputWsids);
  if (!diff) {
    return (
      <div className="diff-panel">
        <div className="diff-head">
          <span className="diff-title">diff: input → sorted</span>
          <button type="button" className="diff-close" onClick={onClose}>close</button>
        </div>
        <div className="diff-empty">no input or output yet.</div>
      </div>
    );
  }
  const { added, removed, movers } = diff;
  const empty = !added.length && !removed.length && !movers.length;
  return (
    <div className="diff-panel">
      <div className="diff-head">
        <span className="diff-title">diff: input → sorted</span>
        <span className="diff-summary">
          <span className="diff-stat add">+{added.length}</span>
          <span className="diff-stat rm">−{removed.length}</span>
          <span className="diff-stat mv">↕{movers.length}</span>
        </span>
        <button type="button" className="diff-close" onClick={onClose}>close</button>
      </div>
      {empty && <div className="diff-empty">order matches your input. nothing dropped or added.</div>}
      {added.length > 0 && (
        <div className="diff-section">
          <div className="diff-label">added ({added.length}) - collection expansion or branch-picker</div>
          {added.slice(0, 30).map(w => <div key={w} className="diff-row diff-add">+ {w}</div>)}
          {added.length > 30 && <div className="diff-more">…and {added.length - 30} more</div>}
        </div>
      )}
      {removed.length > 0 && (
        <div className="diff-section">
          <div className="diff-label">removed ({removed.length}) - dropped, banned, missing mod.info, or a collection ID that expanded</div>
          {removed.slice(0, 30).map(w => <div key={w} className="diff-row diff-rm">− {w}</div>)}
          {removed.length > 30 && <div className="diff-more">…and {removed.length - 30} more</div>}
        </div>
      )}
      {movers.length > 0 && (
        <div className="diff-section">
          <div className="diff-label">reordered by load order ({movers.length}, top {Math.min(10, movers.length)} shown)</div>
          {movers.slice(0, 10).map(({ wsid, from, to, delta }) => (
            <div key={wsid} className="diff-row diff-mv">
              <span className="diff-arrow">{delta < 0 ? '↑' : '↓'}</span>
              {wsid}
              <span className="diff-pos">pos {from + 1} → {to + 1} ({delta > 0 ? '+' : ''}{delta})</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}