/* Tweaks panel */

function Tweaks({ state, setState, visible }) {
  const setKey = (k, v) => {
    setState(s => ({ ...s, [k]: v }));
    if (window.parent !== window) {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    }
  };

  return (
    <div className={`tweaks ${visible ? '' : 'hidden'}`}>
      <h4>Tweaks</h4>

      <div className="tweaks-row">
        <span className="tweaks-label">Theme</span>
        <div className="tweaks-options">
          {['dark', 'light'].map(v => (
            <button key={v}
              className={`tweaks-opt ${state.theme === v ? 'active' : ''}`}
              onClick={() => setKey('theme', v)}>{v}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-row">
        <span className="tweaks-label">Accent</span>
        <div className="tweaks-colors">
          {[
            ['purple', '#c084fc'],
            ['cyan', '#22d3ee'],
            ['amber', '#fbbf24'],
            ['lime', '#a3e635'],
            ['rose', '#fb7185'],
            ['white', '#f4f4f5'],
          ].map(([name, hex]) => (
            <button key={name}
              className={`tweaks-color ${state.accent === name ? 'active' : ''}`}
              style={{ background: hex }}
              onClick={() => setKey('accent', name)} />
          ))}
        </div>
      </div>

      <div className="tweaks-row">
        <span className="tweaks-label">Particles</span>
        <div className="tweaks-options">
          {[['on', true], ['off', false]].map(([lbl, v]) => (
            <button key={lbl}
              className={`tweaks-opt ${state.particles === v ? 'active' : ''}`}
              onClick={() => setKey('particles', v)}>{lbl}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-row" style={{ alignItems: 'flex-start', flexDirection: 'column', gap: 6 }}>
        <span className="tweaks-label">Hero verbs</span>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {[
            ['CODE·BUILD·DEPLOY', ['CODE', 'BUILD', 'DEPLOY']],
            ['ship·scale·craft', ['shipping', 'scaling', 'crafting']],
            ['design·code·launch', ['design', 'code', 'launch']],
          ].map(([lbl, arr]) => (
            <button key={lbl}
              className={`tweaks-opt ${state.heroVerbs.join('') === arr.join('') ? 'active' : ''}`}
              onClick={() => setKey('heroVerbs', arr)}>{lbl}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = Tweaks;