// Tweaks panel — live theme controls
const Tweaks = () => {
  const [active, setActive] = useState(false);
  const [t, setT] = useState(window.__TWEAKS__);

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

  useEffect(() => {
    document.documentElement.setAttribute('data-accent', t.accent);
    document.documentElement.setAttribute('data-theme', t.theme || 'dark');
    document.body.setAttribute('data-grain', String(t.showGrain));
  }, [t]);

  const update = (k, v) => {
    const nxt = { ...t, [k]: v };
    setT(nxt);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  if (!active) return null;

  const accents = [
    ['violet','#c084fc'],
    ['blue','#3172f0'],
    ['cyan','#67e8f9'],
    ['lime','#bef264'],
    ['peach','#fdba74'],
  ];

  const isLight = t.theme === 'light';

  return (
    <div className="glass" style={{
      position:'fixed', bottom: 20, right: 20, zIndex: 200,
      padding: 20, width: 300, borderRadius: 16,
      background: 'var(--tweaks-bg)'
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing:'.14em', color:'var(--fg-3)' }}>TWEAKS</div>
        <button onClick={() => setActive(false)} style={{ color:'var(--fg-3)' }}><Icon name="close" size={14}/></button>
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap: 18 }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', marginBottom: 10 }}>THEME</div>
          <div style={{ display:'flex', gap: 6, padding: 4, background:'var(--bg-3)', borderRadius: 10, border:'1px solid var(--line)' }}>
            {['dark','light'].map(m => (
              <button key={m} onClick={() => update('theme', m)} style={{
                flex: 1, padding: '8px 10px', borderRadius: 7, fontSize: 12, fontWeight: 500,
                background: (t.theme || 'dark') === m ? 'var(--accent)' : 'transparent',
                color: (t.theme || 'dark') === m ? 'var(--bg)' : 'var(--fg-2)',
                transition: 'all .2s', textTransform: 'capitalize'
              }}>{m}</button>
            ))}
          </div>
        </div>

        <div>
          <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em', marginBottom: 10 }}>ACCENT</div>
          <div style={{ display:'flex', gap: 8 }}>
            {accents.map(([id, hex]) => (
              <button key={id} onClick={() => update('accent', id)} title={id} style={{
                width: 38, height: 38, borderRadius: '50%',
                background: hex,
                border: t.accent === id ? '2px solid var(--fg)' : '2px solid transparent',
                boxShadow: t.accent === id ? `0 0 0 2px ${hex}40` : 'none',
                transition:'all .2s'
              }}/>
            ))}
          </div>
        </div>

        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div className="mono" style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'.14em' }}>GRAIN</div>
          <button onClick={() => update('showGrain', !t.showGrain)} style={{
            width: 40, height: 22, borderRadius: 11,
            background: t.showGrain ? 'var(--accent)' : 'var(--line-2)',
            position:'relative', transition:'background .2s'
          }}>
            <span style={{
              position:'absolute', top: 2, left: t.showGrain ? 20 : 2,
              width: 18, height: 18, borderRadius: '50%', background:'var(--bg)',
              transition:'left .2s'
            }}/>
          </button>
        </div>

        <div style={{ fontSize: 11, color:'var(--fg-3)', lineHeight: 1.4, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
          Toggle light/dark and try different accents — everything re-tints live.
        </div>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;