// tweaks.jsx — Helius tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroIntensity": 1,
  "palette": "graphite",
  "liveMode": "on"
}/*EDITMODE-END*/;

window.mountTweaks = function() {
  let editMode = false;
  let panel = null;

  function applyPalette(p) {
    const r = document.documentElement;
    if (p === "cream") {
      r.style.setProperty('--ink-1', '#f2ede0');
      r.style.setProperty('--ink-0', '#e8e3d5');
      r.style.setProperty('--ink-2', '#ddd8ca');
      r.style.setProperty('--ink-3', '#cfc9b8');
      r.style.setProperty('--ink-4', '#b8b1a0');
      r.style.setProperty('--cream-0', '#1a1a15');
      r.style.setProperty('--cream-1', '#3a3a30');
      r.style.setProperty('--cream-2', '#6a6558');
      r.style.setProperty('--cream-3', '#8a8477');
      r.style.setProperty('--gold-0', '#9a6a1a');
      r.style.setProperty('--gold-1', '#7a5214');
    } else if (p === "sun") {
      r.style.setProperty('--ink-1', '#0a0d1a');
      r.style.setProperty('--ink-0', '#060812');
      r.style.setProperty('--gold-0', '#ffb347');
      r.style.setProperty('--gold-1', '#e08a2a');
    } else {
      // graphite (default) — reset
      r.style.removeProperty('--ink-1');
      r.style.removeProperty('--ink-0');
      r.style.removeProperty('--ink-2');
      r.style.removeProperty('--ink-3');
      r.style.removeProperty('--ink-4');
      r.style.removeProperty('--cream-0');
      r.style.removeProperty('--cream-1');
      r.style.removeProperty('--cream-2');
      r.style.removeProperty('--cream-3');
      r.style.removeProperty('--gold-0');
      r.style.removeProperty('--gold-1');
    }
  }

  function render(state) {
    if (!panel) {
      panel = document.createElement('div');
      panel.className = 'tweaks';
      document.body.appendChild(panel);
    }
    panel.style.display = editMode ? 'block' : 'none';
    panel.innerHTML = `
      <h4>TWEAKS</h4>
      <div class="tweaks-row">
        <label>Palette</label>
        <div style="display:flex;gap:4px;">
          <button data-k="palette" data-v="graphite" class="${state.palette === 'graphite' ? 'active' : ''}">Graphite</button>
          <button data-k="palette" data-v="cream" class="${state.palette === 'cream' ? 'active' : ''}">Cream</button>
          <button data-k="palette" data-v="sun" class="${state.palette === 'sun' ? 'active' : ''}">Sun-god</button>
        </div>
      </div>
      <div class="tweaks-row">
        <label>Live mode</label>
        <div style="display:flex;gap:4px;">
          <button data-k="liveMode" data-v="on" class="${state.liveMode === 'on' ? 'active' : ''}">On</button>
          <button data-k="liveMode" data-v="off" class="${state.liveMode === 'off' ? 'active' : ''}">Static</button>
        </div>
      </div>
      <div class="tweaks-row">
        <label>Hero intensity</label>
        <div style="display:flex;gap:4px;">
          <button data-k="heroIntensity" data-v="0.5" class="${state.heroIntensity === 0.5 ? 'active' : ''}">Low</button>
          <button data-k="heroIntensity" data-v="1" class="${state.heroIntensity === 1 ? 'active' : ''}">Med</button>
          <button data-k="heroIntensity" data-v="1.6" class="${state.heroIntensity === 1.6 ? 'active' : ''}">High</button>
        </div>
      </div>
      <div class="tweaks-row" style="padding-top:10px;">
        <label style="color:var(--cream-3);">∞ → 0 → 1</label>
        <button onclick="window.mountTweaks.close()">close</button>
      </div>
    `;
    panel.querySelectorAll('button[data-k]').forEach(b => {
      b.addEventListener('click', () => {
        const k = b.dataset.k;
        let v = b.dataset.v;
        if (k === 'heroIntensity') v = parseFloat(v);
        const edits = { [k]: v };
        state[k] = v;
        if (k === 'palette') applyPalette(v);
        if (k === 'liveMode') {
          document.querySelectorAll('.ticker').forEach(t => {
            t.style.animationPlayState = v === 'off' ? 'paused' : 'running';
          });
        }
        window.parent.postMessage({type: '__edit_mode_set_keys', edits}, '*');
        render(state);
      });
    });
  }

  const state = { ...TWEAK_DEFAULTS };
  applyPalette(state.palette);

  // CRITICAL: register listener BEFORE announcing
  window.addEventListener('message', (e) => {
    const d = e.data || {};
    if (d.type === '__activate_edit_mode') { editMode = true; render(state); }
    else if (d.type === '__deactivate_edit_mode') { editMode = false; if (panel) panel.style.display = 'none'; }
  });
  window.mountTweaks.close = () => { editMode = false; if (panel) panel.style.display = 'none'; };

  // Then announce
  window.parent.postMessage({type: '__edit_mode_available'}, '*');
};