// versions.jsx
// Version history modal: sidebar of snapshots + side-by-side line diff.

const { useState: useStateV, useMemo: useMemoV, useEffect: useEffectV } = React;

const VIcon = {
  X: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 6L6 18M6 6l12 12" />
    </svg>
  ),
  Restore: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" />
    </svg>
  ),
};

function relTime(ts) {
  const s = (Date.now() - ts) / 1000;
  if (s < 60) return 'just now';
  if (s < 3600) return Math.floor(s / 60) + 'm ago';
  if (s < 86400) return Math.floor(s / 3600) + 'h ago';
  const d = Math.floor(s / 86400);
  if (d < 7) return d + 'd ago';
  return new Date(ts).toLocaleDateString();
}

function VersionsModal({ versions, currentMarkdown, onClose, onRestore }) {
  // versions: [{ id, label, content, ts, source }]  oldest -> newest
  // Add "Current" as a synthetic latest entry
  const items = useMemoV(() => {
    const list = [...versions];
    list.push({
      id: '__current__',
      label: 'Current draft',
      content: currentMarkdown,
      ts: Date.now(),
      source: 'live',
    });
    return list.reverse(); // newest first
  }, [versions, currentMarkdown]);

  // Default: compare current with previous version
  const [aId, setAId] = useStateV(items[1]?.id || items[0]?.id);
  const [bId, setBId] = useStateV(items[0]?.id);

  useEffectV(() => {
    setAId(items[1]?.id || items[0]?.id);
    setBId(items[0]?.id);
  }, [versions.length]);

  const a = items.find(x => x.id === aId) || items[items.length - 1];
  const b = items.find(x => x.id === bId) || items[0];

  const diff = useMemoV(() => window.diffLines(a?.content || '', b?.content || ''), [a?.content, b?.content]);

  const onItemClick = (e, id) => {
    if (e.shiftKey) {
      // Set as B (newer side)
      setBId(id);
    } else {
      setAId(id);
    }
  };

  // Esc to close
  useEffectV(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [onClose]);

  return (
    <React.Fragment>
      <div className="versions-backdrop" onClick={onClose}></div>
      <div className="versions-modal" role="dialog" aria-modal="true">
        <div className="versions-list">
          <div className="versions-list-hd">
            <h3>Versions</h3>
            <button className="icon-btn" onClick={onClose} title="Close"><VIcon.X /></button>
          </div>
          <div className="versions-list-items">
            {items.map((v) => {
              const cls = v.id === aId ? 'selected-a' : v.id === bId ? 'selected-b' : '';
              const badge = v.id === aId ? 'A' : v.id === bId ? 'B' : null;
              return (
                <div
                  key={v.id}
                  className={`version-item ${cls}`}
                  onClick={(e) => onItemClick(e, v.id)}
                >
                  <div className="vlabel">{v.label}</div>
                  <div className="vmeta">
                    <span>{relTime(v.ts)}</span>
                    {v.source === 'agent' ? <span>· Claude</span> : null}
                    {v.source === 'user' ? <span>· Manual</span> : null}
                  </div>
                  {badge ? <div className="vbadge">{badge}</div> : null}
                </div>
              );
            })}
          </div>
          <div style={{
            padding: '10px 14px',
            borderTop: '1px solid var(--rule)',
            fontSize: 11,
            color: 'var(--ink-faint)',
            lineHeight: 1.5,
          }}>
            Click to set <b style={{ color: 'var(--ink-muted)' }}>A</b>. Shift-click to set <b style={{ color: 'var(--ink-muted)' }}>B</b>.
          </div>
        </div>

        <div className="versions-main">
          <div className="versions-main-hd">
            <div className="pair">
              <span>Comparing</span>
              <b>{a?.label}</b>
              <span style={{ color: 'var(--ink-faint)' }}>→</span>
              <b>{b?.label}</b>
              <span style={{ marginLeft: 12, color: 'var(--ink-muted)', fontSize: 12 }}>
                <span style={{ color: 'var(--add-ink)' }}>+{diff.added}</span>
                {' '}
                <span style={{ color: 'var(--del-ink)' }}>−{diff.removed}</span>
              </span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {b?.id !== '__current__' ? (
                <button
                  className="btn primary"
                  onClick={() => { onRestore(b.content, b.label); onClose(); }}
                  title="Replace current draft with this version"
                >
                  <VIcon.Restore /> Restore this version
                </button>
              ) : null}
            </div>
          </div>

          <div className="diff-body">
            <div className="diff-col">
              <div className="diff-col-hd">A · {a?.label}</div>
              <DiffSide rows={diff.rows} side="left" />
            </div>
            <div className="diff-col">
              <div className="diff-col-hd">B · {b?.label}</div>
              <DiffSide rows={diff.rows} side="right" />
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

function DiffSide({ rows, side }) {
  let aN = 0, bN = 0;
  return (
    <div className="diff-lines">
      {rows.map((r, i) => {
        if (side === 'left') {
          // Show del + chg + eq; placeholder for add
          if (r.type === 'add') {
            return <div key={i} className="diff-line placeholder"><div className="gutter"></div><div></div></div>;
          }
          aN++;
          const cls = r.type === 'del' ? 'del' : r.type === 'chg' ? 'del' : 'eq';
          return (
            <div key={i} className={`diff-line ${cls}`}>
              <div className="gutter">{aN}</div>
              <div>{r.left || '\u00a0'}</div>
            </div>
          );
        } else {
          if (r.type === 'del') {
            return <div key={i} className="diff-line placeholder"><div className="gutter"></div><div></div></div>;
          }
          bN++;
          const cls = r.type === 'add' ? 'add' : r.type === 'chg' ? 'add' : 'eq';
          return (
            <div key={i} className={`diff-line ${cls}`}>
              <div className="gutter">{bN}</div>
              <div>{r.right || '\u00a0'}</div>
            </div>
          );
        }
      })}
    </div>
  );
}

window.VersionsModal = VersionsModal;