// Tweaks panel — toggled via toolbar

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  return (
    <div style={{
      position:'fixed', right: 20, bottom: 20, width: 300, zIndex: 1000,
      background:'var(--paper)', border:'1px solid var(--line-2)', borderRadius: 14,
      boxShadow:'var(--shadow-lg)', overflow:'hidden',
    }}>
      <div style={{ padding:'12px 14px', display:'flex', alignItems:'center', justifyContent:'space-between', borderBottom:'1px solid var(--line)' }}>
        <span className="serif" style={{ fontSize: 18 }}>Tweaks</span>
        <span style={{ fontSize: 11, color:'var(--ink-3)' }} className="mono">aftershot.local</span>
      </div>
      <div style={{ padding: 14, display:'flex', flexDirection:'column', gap: 14 }}>
        <TweakRow label="Tema">
          <SegBtns
            options={[['light','Claro'],['dark','Escuro']]}
            value={tweaks.theme} onChange={v => set('theme', v)}/>
        </TweakRow>
        <TweakRow label="Densidade">
          <SegBtns
            options={[['cozy','Relax'],['compact','Compacto']]}
            value={tweaks.density} onChange={v => set('density', v)}/>
        </TweakRow>
        <TweakRow label="Antes/Depois">
          <SegBtns
            options={[['slider','Slider'],['split','Split'],['after','Só depois']]}
            value={tweaks.beforeAfterStyle} onChange={v => set('beforeAfterStyle', v)}/>
        </TweakRow>
        <TweakRow label="Cor de destaque">
          <div style={{ display:'flex', gap: 8 }}>
            {[
              ['terracotta','#C96442'],
              ['olive','#5C6B3F'],
              ['azul','#4A6B8A'],
              ['rosa','#C46B6B'],
            ].map(([id, col]) => (
              <button key={id} onClick={() => set('accent', id)}
                style={{
                  width: 28, height: 28, borderRadius:'50%', background: col,
                  border: '2px solid ' + (tweaks.accent===id ? 'var(--ink)' : 'transparent'),
                  boxShadow: tweaks.accent===id ? '0 0 0 2px var(--paper), 0 0 0 3px var(--ink)' : 'none',
                }}/>
            ))}
          </div>
        </TweakRow>
      </div>
    </div>
  );
}

function TweakRow({ label, children }) {
  return (
    <div>
      <div style={{ fontSize: 11, color:'var(--ink-3)', letterSpacing:'.06em', textTransform:'uppercase', marginBottom: 6 }}>{label}</div>
      {children}
    </div>
  );
}

function SegBtns({ options, value, onChange }) {
  return (
    <div style={{ display:'flex', background:'var(--bg-warm)', borderRadius: 8, padding: 3, border:'1px solid var(--line)' }}>
      {options.map(([id, label]) => (
        <button key={id} onClick={() => onChange(id)} style={{
          flex: 1, padding:'6px 8px', fontSize: 12, fontWeight: 500, borderRadius: 6,
          background: value===id ? 'var(--paper)' : 'transparent',
          color: value===id ? 'var(--ink)' : 'var(--ink-3)',
          boxShadow: value===id ? 'var(--shadow-sm)' : 'none',
        }}>{label}</button>
      ))}
    </div>
  );
}

Object.assign(window, { TweaksPanel });