/* ============================================================
   tweaks.jsx — floating tweaks panel
   ============================================================ */

function TweaksPanel() {
  const { tweaks, setTweaks, doc, updateMeta } = useApp();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!visible) return null;

  return (
    <div className="tweaks-panel">
      <h3>Tweaks <span className="muted">live preview</span></h3>

      <div className="tweaks-row">
        <div className="label">Editor thema</div>
        <div className="theme-dots">
          {['matcha','blue','antraciet','warm'].map(t => (
            <div key={t}
                 className={'theme-dot' + (tweaks.theme === t ? ' active':'')}
                 data-t={t} title={t}
                 onClick={() => update({ theme: t })}/>
          ))}
        </div>
      </div>

      <div className="tweaks-row">
        <div className="label">Jouw rol</div>
        <div className="seg">
          {['instromer','reviewer','eindredacteur'].map(r => (
            <button key={r} className={tweaks.role === r ? 'active' : ''}
                    onClick={() => update({ role: r })}>
              {ROLES[r].label}
            </button>
          ))}
        </div>
        <div style={{fontSize: 10.5, color: 'var(--ink-4)', marginTop: 6, lineHeight: 1.4}}>
          Ingelogd als <strong style={{color: ROLES[tweaks.role].color}}>{ROLES[tweaks.role].name}</strong>.
          {tweaks.role === 'instromer' && ' Kan comments + voorstellen plaatsen.'}
          {tweaks.role === 'reviewer' && ' Kan alles reviewen, comments + voorstellen plaatsen.'}
          {tweaks.role === 'eindredacteur' && ' Kan voorstellen accepteren/afwijzen.'}
        </div>
      </div>

      <div className="tweaks-row">
        <div className="label">UI dichtheid</div>
        <div className="seg">
          <button className={tweaks.density === 'compact' ? 'active':''}
                  onClick={() => update({ density: 'compact' })}>Compact</button>
          <button className={tweaks.density === 'comfortable' ? 'active':''}
                  onClick={() => update({ density: 'comfortable' })}>Ruim</button>
        </div>
      </div>

      <div className="tweaks-row">
        <div className="label">Preview modus</div>
        <div className="seg">
          <button className={tweaks.previewMode === 'doc' ? 'active':''}
                  onClick={() => update({ previewMode: 'doc' })}><I.edit/> Doc</button>
          <button className={tweaks.previewMode === 'print' ? 'active':''}
                  onClick={() => update({ previewMode: 'print' })}><I.print/> Print</button>
        </div>
      </div>

      <div style={{borderTop: '1px solid var(--rule)', margin: '14px -14px 10px', padding: '10px 14px 0'}}>
        <div style={{fontSize: 10.5, color: 'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom: 8}}>
          Reviewlink demo
        </div>
        <div style={{fontSize: 12, color:'var(--ink-3)', lineHeight: 1.5, marginBottom: 10}}>
          Stap naar <strong>Review</strong> om de naam-prompt te zien die externe reviewers krijgen.
        </div>
        <ReviewerIdentityRow/>
      </div>

      <div style={{borderTop: '1px solid var(--rule)', margin: '14px -14px 10px', padding: '10px 14px 0'}}>
        <div style={{fontSize: 10.5, color: 'var(--ink-4)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom: 8}}>
          Document layout
        </div>

        <div className="tweaks-row">
          <div className="label">Oriëntatie</div>
          <div className="seg">
            <button className={doc.meta.orientation === 'portrait' ? 'active' : ''}
                    onClick={() => updateMeta({ orientation: 'portrait' })}>Portret</button>
            <button className={doc.meta.orientation === 'landscape' ? 'active' : ''}
                    onClick={() => updateMeta({ orientation: 'landscape' })}>Landschap</button>
          </div>
        </div>

        <div className="tweaks-row">
          <div className="label">Kolommen</div>
          <div className="seg">
            {[1,2,3].map(c => (
              <button key={c} className={(doc.meta.columns||1) === c ? 'active' : ''}
                      onClick={() => updateMeta({ columns: c })}>{c} kol</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ReviewerIdentityRow() {
  const { reviewer, setReviewer, setStage } = useApp();
  if (!reviewer) {
    return (
      <button className="btn" style={{width:'100%', justifyContent:'center'}}
              onClick={() => setStage('review')}>
        Open review als nieuwe reviewer
      </button>
    );
  }
  return (
    <div style={{display:'flex', alignItems:'center', gap: 8}}>
      <span className="dot" style={{width:8, height:8, borderRadius:'50%', background: reviewer.color, flexShrink:0}}/>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize: 12, fontWeight: 500, color:'var(--ink-1)',
                     whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
          {reviewer.name}
        </div>
        {reviewer.org && (
          <div style={{fontSize: 10.5, color:'var(--ink-4)',
                       whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
            {reviewer.org}
          </div>
        )}
      </div>
      <button className="btn" style={{padding:'4px 8px', fontSize: 11}}
              onClick={() => setReviewer(null)}>Reset</button>
    </div>
  );
}

Object.assign(window, { TweaksPanel });