// AiPreviewRevision.jsx — Forhåndsvisning «Revider hele todo-listen» (§4.3).
//
// En endringsliste (diff), ikke en plan. Én rad per foreslått operasjon,
// gruppert med tydelige merker. Checkbox per rad (på = utfør). `risk` styrer
// default-avhuking: high (delete/usikkert) er AV som default og må velges aktivt.
//
// Kontrollert: rapporterer { activeOps, rejected } opp via onChangeSelection.

function AiPreviewRevision({ result, onChangeSelection, aliasTitles }) {
  const ops = React.useMemo(() => (Array.isArray(result?.ops) ? result.ops : []), [result]);

  // Default-utvalg: alt unntatt risk === 'high' (§8.2).
  const [selected, setSelected] = React.useState(() => new Set());
  React.useEffect(() => {
    const init = new Set();
    ops.forEach(op => { if (op.risk !== 'high') init.add(op.id); });
    setSelected(init);
  }, [ops]);

  React.useEffect(() => {
    const activeOps = ops.filter(op => selected.has(op.id));
    const rejected = ops.filter(op => !selected.has(op.id)).map(op => op.ref || op.id);
    onChangeSelection && onChangeSelection({ activeOps, rejected });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selected, ops]);

  function toggle(id) {
    setSelected(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
  }

  // Visuell klassifisering av op-typer (§4.3).
  const META = {
    create_task: { cls: 'is-new', dot: '🟢', label: 'Ny' },
    reschedule: { cls: 'is-change', dot: '🔵', label: 'Endre' },
    set_priority: { cls: 'is-change', dot: '🔵', label: 'Endre' },
    set_category: { cls: 'is-change', dot: '🔵', label: 'Endre' },
    rename: { cls: 'is-change', dot: '🔵', label: 'Endre' },
    set_rank: { cls: 'is-change', dot: '🔵', label: 'Endre' },
    set_slot: { cls: 'is-change', dot: '🔵', label: 'Endre' },
    complete: { cls: 'is-done', dot: '🟡', label: 'Fullfør' },
    delete: { cls: 'is-del', dot: '🔴', label: 'Slett' },
  };

  function titleFor(op) {
    if (op.op === 'create_task') {
      try { const d = typeof op.value === 'string' ? JSON.parse(op.value) : op.value; return d?.title || 'Ny oppgave'; }
      catch { return 'Ny oppgave'; }
    }
    return (aliasTitles && aliasTitles[op.ref]) || op.ref || 'Oppgave';
  }

  function changeText(op) {
    switch (op.op) {
      case 'reschedule': return `Ny frist: ${op.value}`;
      case 'set_priority': return `Prioritet → ${op.value}`;
      case 'set_category': return `Kategori → ${op.value}`;
      case 'rename': return `Ny tittel: «${op.value}»`;
      case 'set_rank': return `Rekkefølge → ${op.value}`;
      case 'complete': return 'Marker som fullført';
      case 'delete': return 'Slett oppgaven';
      case 'create_task': return 'Opprett ny oppgave';
      default: return op.op;
    }
  }

  const selCount = selected.size;

  if (!ops.length) return <div className="ai-pv-empty">Ingen forslag — listen ser ryddig ut.</div>;

  return (
    <div className="ai-pv ai-pv-rev">
      {result.summary && <div className="ai-pv-headline">{result.summary}</div>}
      <div className="ai-pv-rev-count">{ops.length} forslag · {selCount} valgt</div>
      <div className="ai-pv-list">
        {ops.map(op => {
          const meta = META[op.op] || { cls: '', dot: '⚪', label: op.op };
          const on = selected.has(op.id);
          return (
            <label key={op.id} className={`ai-pv-rev-row ${meta.cls}${on ? ' is-on' : ''}`}>
              <input type="checkbox" checked={on} onChange={() => toggle(op.id)} />
              <span className="ai-pv-rev-mark">{meta.dot} {meta.label}</span>
              <span className="ai-pv-rev-body">
                <span className="ai-pv-title">{titleFor(op)}</span>
                <span className="ai-pv-rev-change">{changeText(op)}</span>
                {op.reason && <span className="ai-pv-reason">{op.reason}</span>}
              </span>
              {op.risk === 'high' && <span className="ai-pv-badge ai-pv-badge-risk">Sjekk</span>}
            </label>
          );
        })}
      </div>
    </div>
  );
}

window.AiPreviewRevision = AiPreviewRevision;