// Tweaks panel
const { useState: uS, useEffect: uE } = React;

const PALETTES = {
  dmg: { ink:'#0b1a0a', dark:'#2e4a2b', mid:'#7a9b5a', light:'#c7d79a', paper:'#ede6d2', paper2:'#d9d1b8', accent:'#b33' },
  pocket: { ink:'#1a1a1a', dark:'#3a3a3a', mid:'#7a7a7a', light:'#c2c2c2', paper:'#ede6d2', paper2:'#d9d1b8', accent:'#b33' },
  color: { ink:'#0a1029', dark:'#2a2f5a', mid:'#5a7acc', light:'#d6e2ff', paper:'#f0ead8', paper2:'#dcd4bb', accent:'#d94040' },
  riso:  { ink:'#1a2a6c', dark:'#2b3a82', mid:'#6477c7', light:'#c9d0ea', paper:'#f4eedc', paper2:'#e0d8be', accent:'#d94040' },
};

function applyPalette(key) {
  const p = PALETTES[key] || PALETTES.dmg;
  const r = document.documentElement.style;
  r.setProperty('--ink', p.ink);
  r.setProperty('--dark', p.dark);
  r.setProperty('--mid', p.mid);
  r.setProperty('--light', p.light);
  r.setProperty('--paper', p.paper);
  r.setProperty('--paper-2', p.paper2);
  r.setProperty('--accent', p.accent);
}

function Tweaks({ state, setState }) {
  const [visible, setVisible] = uS(false);
  uE(() => {
    const h = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      else if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', h);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', h);
  }, []);

  const persist = (k, v) => {
    setState(s => ({ ...s, [k]: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  if (!visible) return null;

  return (
    <div style={{
      position: 'fixed', right: 16, bottom: 16, zIndex: 2000,
      width: 300,
      background: 'var(--paper)',
      border: '3px solid var(--ink)',
      boxShadow: '6px 6px 0 var(--ink)',
      padding: 14,
      fontFamily: "'VT323', monospace",
      fontSize: 16,
      color: 'var(--ink)',
    }}>
      <div style={{
        fontFamily: "'Press Start 2P',monospace",
        fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
        borderBottom: '1px solid var(--ink)', paddingBottom: 8, marginBottom: 10,
      }}>Tweaks</div>

      <TweakGroup label="Palette">
        {['dmg','pocket','color','riso'].map(k => (
          <TweakPill key={k} active={state.palette === k} onClick={() => persist('palette', k)}>{k.toUpperCase()}</TweakPill>
        ))}
      </TweakGroup>

      <TweakGroup label="Hero Variant">
        {['portrait','cartridge','sprite'].map(k => (
          <TweakPill key={k} active={state.heroVariant === k} onClick={() => persist('heroVariant', k)}>{k}</TweakPill>
        ))}
      </TweakGroup>

      <TweakGroup label="Paper Texture">
        <input type="range" min="0" max="1.5" step="0.05" value={state.paperTex}
          onChange={e => persist('paperTex', parseFloat(e.target.value))}
          style={{ width: '100%' }} />
      </TweakGroup>

      <TweakGroup label="CRT Scanlines">
        <input type="range" min="0" max="0.8" step="0.05" value={state.crt}
          onChange={e => persist('crt', parseFloat(e.target.value))}
          style={{ width: '100%' }} />
      </TweakGroup>
    </div>
  );
}

function TweakGroup({ label, children }) {
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={{ fontFamily: "'Press Start 2P',monospace", fontSize: 8, letterSpacing: '0.1em', marginBottom: 6, color: 'var(--dark)' }}>{label}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>{children}</div>
    </div>
  );
}

function TweakPill({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      fontFamily: "'Press Start 2P',monospace",
      fontSize: 8, padding: '5px 7px',
      background: active ? 'var(--ink)' : 'transparent',
      color: active ? 'var(--paper)' : 'var(--ink)',
      border: '2px solid var(--ink)',
      cursor: 'pointer',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
    }}>{children}</button>
  );
}

window.Tweaks = Tweaks;
window.applyPalette = applyPalette;