// ===== Tweaks panel =====
const { useState: useTS, useEffect: useTE } = React;

function TweaksPanel({ tweaks, setTweaks, onClose }) {
  const setKey = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (e) {}
  };

  return (
    <div className="tweaks-panel">
      <button className="tweak-panel-close" onClick={onClose} aria-label="close">×</button>
      <h4>Tweaks ↺</h4>

      <div className="tweak-row">
        <label>Theme</label>
        <div className="tweak-swatch">
          <button
            style={{ background: '#F5EFE4' }}
            className={tweaks.theme === 'light' ? 'on' : ''}
            onClick={() => setKey('theme', 'light')}
            aria-label="light"
          />
          <button
            style={{ background: '#121A2E' }}
            className={tweaks.theme === 'dark' ? 'on' : ''}
            onClick={() => setKey('theme', 'dark')}
            aria-label="dark"
          />
        </div>
      </div>

      <div className="tweak-row">
        <label>Flying cursor</label>
        <div
          className={`tweak-toggle ${tweaks.cursor ? 'on' : ''}`}
          onClick={() => setKey('cursor', !tweaks.cursor)}
          role="switch"
          aria-checked={tweaks.cursor}
        />
      </div>

      <div className="tweak-row">
        <label>Stickers</label>
        <div
          className={`tweak-toggle ${tweaks.stickers ? 'on' : ''}`}
          onClick={() => setKey('stickers', !tweaks.stickers)}
        />
      </div>

      <div className="tweak-row">
        <label>Hero copy</label>
        <div className="tweak-swatch">
          {[0, 1, 2].map(i => (
            <button
              key={i}
              style={{ background: 'var(--cream-2)', color: 'var(--ink)', fontFamily: 'var(--f-mono)', fontSize: 11, width: 28, height: 24, borderRadius: 6 }}
              className={tweaks.hero === i ? 'on' : ''}
              onClick={() => setKey('hero', i)}
            >{i+1}</button>
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>Accent</label>
        <div className="tweak-swatch">
          <button
            style={{ background: '#E85A3C' }}
            className={tweaks.accent === 'coral' ? 'on' : ''}
            onClick={() => setKey('accent', 'coral')}
          />
          <button
            style={{ background: '#5AC4B9' }}
            className={tweaks.accent === 'teal' ? 'on' : ''}
            onClick={() => setKey('accent', 'teal')}
          />
          <button
            style={{ background: '#F5C23C' }}
            className={tweaks.accent === 'yellow' ? 'on' : ''}
            onClick={() => setKey('accent', 'yellow')}
          />
        </div>
      </div>

      <p style={{ fontSize: 11, opacity: 0.6, marginTop: 12, lineHeight: 1.4 }}>
        Play with the toggles — saved on reload.
      </p>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;