/* ============================================================
   review.jsx — stage 3: review summary + feedback aggregate
   ============================================================ */

function ReviewScreen() {
  const { doc, setStage, acceptSuggestion, rejectSuggestion, updateComment } = useApp();

  const open   = doc.comments.filter(c => !c.resolved);
  const pend   = doc.suggestions.filter(s => s.status === 'pending');
  const acc    = doc.suggestions.filter(s => s.status === 'accepted');
  const words  = doc.blocks.reduce((n, b) => {
    const t = (b.text || '') + ' ' + (b.items?.join(' ') || '') + ' ' + (b.body || '');
    return n + t.trim().split(/\s+/).filter(Boolean).length;
  }, 0);

  const acceptAll = () => pend.forEach(s => acceptSuggestion(s.id));
  const resolveAll = () => open.forEach(c => updateComment(c.id, { resolved: true }));

  return (
    <div className="review-wrap">
      <div className="review-main">
        <div style={{maxWidth: 820, margin: '0 auto 24px', display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
          <div>
            <div style={{fontSize: 11, color:'var(--ink-4)', letterSpacing:'0.08em', textTransform:'uppercase'}}>Stap 3</div>
            <h2 style={{fontFamily:'var(--f-serif)', fontWeight:500, fontSize: 30, margin:'4px 0 4px', letterSpacing:'-0.01em'}}>
              Review & afronden
            </h2>
            <p style={{fontSize: 13, color:'var(--ink-3)', margin: 0, maxWidth: 460}}>
              Controleer alle feedback en los openstaande voorstellen op voordat je exporteert.
            </p>
          </div>
          <div style={{display:'flex', gap: 8}}>
            {!window.IS_REVIEWER_MODE && (
              <>
                <button className="btn" onClick={() => setStage('editor')}>← Terug naar editor</button>
                <button className="btn btn-primary" onClick={() => setStage('export')}>Door naar export →</button>
              </>
            )}
          </div>
        </div>

        {/* live preview thumbnail */}
        <div style={{maxWidth: 820, margin: '0 auto'}}>
          <Canvas/>
        </div>
      </div>

      <aside className="review-aside">
        {!window.IS_REVIEWER_MODE && <SharePanel/>}

        <h4>Samenvatting</h4>
        <div className="review-summary">
          <div className="review-stat"><span>Blokken</span><strong>{doc.blocks.length}</strong></div>
          <div className="review-stat"><span>Woorden</span><strong>{words}</strong></div>
          <div className="review-stat"><span>Open comments</span><strong>{open.length}</strong></div>
          <div className="review-stat"><span>Open voorstellen</span><strong>{pend.length}</strong></div>
          <div className="review-stat"><span>Geaccepteerd</span><strong>{acc.length}</strong></div>
        </div>

        {!window.IS_REVIEWER_MODE && (
          <>
            <h4>Bulk-acties</h4>
            <div style={{display:'flex', flexDirection:'column', gap: 8, marginBottom: 22}}>
              <button className="btn" onClick={acceptAll} disabled={pend.length === 0}>
                Alle voorstellen accepteren ({pend.length})
              </button>
              <button className="btn" onClick={resolveAll} disabled={open.length === 0}>
                Alle comments oplossen ({open.length})
              </button>
            </div>
          </>
        )}

        <h4>Feedback</h4>
        <div style={{marginLeft: -6, marginRight: -6}}>
          <CommentsPanel />
        </div>
      </aside>
    </div>
  );
}

Object.assign(window, { ReviewScreen });