/* ============== TWEAKS PANEL ============== */

function TweaksPanel() {
  const [open, setOpen] = React.useState(false);
  const [state, setState] = React.useState(() => ({ ...(window.TWEAK_DEFAULTS || {}) }));

  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setOpen(true);
      else if (d.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const apply = (next) => {
    setState(next);
    const root = document.documentElement;
    root.style.setProperty('--scan-intensity', String(next.scanIntensity));
    root.style.setProperty('--glitch', String(next.glitch));
    // accent
    root.style.setProperty('--phos', next.accent);
    const glow = next.accent + (next.accent.includes('oklch') ? '' : '');
    root.style.setProperty('--phos-glow', next.accentGlow);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*'); } catch {}
  };

  if (!open) return null;

  const ACCENTS = [
    { k: 'PHOSPHOR', c: 'oklch(0.88 0.2 145)', g: 'oklch(0.88 0.2 145 / 0.4)' },
    { k: 'AMBER',    c: 'oklch(0.82 0.18 75)', g: 'oklch(0.82 0.18 75 / 0.4)' },
    { k: 'HOT PINK', c: 'oklch(0.74 0.22 0)',  g: 'oklch(0.74 0.22 0 / 0.4)' },
    { k: 'ELECTRIC', c: 'oklch(0.78 0.18 240)',g: 'oklch(0.78 0.18 240 / 0.4)' },
    { k: 'MONO',     c: '#f4f1ea',             g: 'rgba(244,241,234,0.4)' },
  ];

  return (
    <div className="tweaks open">
      <h4>
        <span>◆ TWEAKS</span>
        <button onClick={() => setOpen(false)}>×</button>
      </h4>

      <div className="row">
        <span>Scanlines</span>
        <input type="range" min="0" max="0.8" step="0.05" value={state.scanIntensity}
          onChange={e => apply({ ...state, scanIntensity: parseFloat(e.target.value) })} />
      </div>

      <div className="row">
        <span>Glitch</span>
        <input type="range" min="0" max="2" step="0.1" value={state.glitch}
          onChange={e => apply({ ...state, glitch: parseFloat(e.target.value) })} />
      </div>

      <div style={{ borderTop: '1px dashed var(--fg-faint)', paddingTop: 10, marginTop: 10 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-dim)', marginBottom: 8 }}>ACCENT</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4 }}>
          {ACCENTS.map(a => (
            <button key={a.k} title={a.k}
              onClick={() => apply({ ...state, accent: a.c, accentGlow: a.g })}
              style={{
                height: 28,
                background: a.c,
                borderColor: state.accent === a.c ? a.c : 'var(--fg-faint)',
                boxShadow: state.accent === a.c ? `0 0 10px ${a.g}` : 'none',
                color: 'transparent',
              }}>.</button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;