/* MobiusQuest — Tweaks app. Drives the decorative ambient layer only.
   Mounts an otherwise-invisible React root; the panel appears when the
   user toggles Tweaks in the toolbar. */

const MQ_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "intensity": 1,
  "glow": 1,
  "density": "Средне",
  "motion": true,
  "accent": ["#7c3aed", "#22d3ee"],
  "confetti": true,
  "flash": true,
  "sound": true,
  "haptics": true,
  "parallax": true,
  "grain": false
}/*EDITMODE-END*/;

// accent presets — swatch hexes (shown in panel) + the hues the ambient layer uses
const MQ_PRESETS = [
  { hex: ["#7c3aed", "#22d3ee"], hueA: 265, hueB: 190 }, // Violet · Cyan (brand)
  { hex: ["#a855f7", "#ec4899"], hueA: 292, hueB: 330 }, // Magenta · Pink
  { hex: ["#3b82f6", "#14b8a6"], hueA: 222, hueB: 168 }, // Blue · Teal
  { hex: ["#f59e0b", "#f43f5e"], hueA: 35,  hueB: 350 }, // Sunset
  { hex: ["#10b981", "#84cc16"], hueA: 152, hueB: 92  }  // Emerald · Lime
];

const MQ_DENSITY = { "Меньше": 0.00005, "Средне": 0.00010, "Больше": 0.00018 };

function MQTweaksApp() {
  const [t, setTweak] = useTweaks(MQ_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement.style;
    root.setProperty('--mq-i', String(t.intensity));
    root.setProperty('--mq-glow', String(t.glow));
    root.setProperty('--mq-motion', t.motion ? 'running' : 'paused');

    const preset = MQ_PRESETS.find(
      (p) => JSON.stringify(p.hex).toLowerCase() === JSON.stringify(t.accent).toLowerCase()
    ) || MQ_PRESETS[0];
    root.setProperty('--mq-hue-a', String(preset.hueA));
    root.setProperty('--mq-hue-b', String(preset.hueB));

    if (window.MQAmbient) {
      window.MQAmbient.setMotion(t.motion);
      window.MQAmbient.setDensity(MQ_DENSITY[t.density] ?? 0.00010);
      window.MQAmbient.refreshColors();
    }
    if (window.MQFx) {
      ['confetti', 'flash', 'sound', 'haptics', 'parallax', 'grain'].forEach(
        (k) => window.MQFx.set(k, t[k])
      );
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Атмосфера">
      <TweakSection label="Атмосфера" />
      <TweakSlider label="Интенсивность" value={t.intensity} min={0} max={1.5} step={0.05}
                   onChange={(v) => setTweak('intensity', v)} />
      <TweakSlider label="Свечение" value={t.glow} min={0} max={1.5} step={0.05}
                   onChange={(v) => setTweak('glow', v)} />
      <TweakRadio  label="Частицы" value={t.density}
                   options={["Меньше", "Средне", "Больше"]}
                   onChange={(v) => setTweak('density', v)} />

      <TweakSection label="Движение" />
      <TweakToggle label="Анимация" value={t.motion}
                   onChange={(v) => setTweak('motion', v)} />

      <TweakSection label="Цвет атмосферы" />
      <TweakColor  label="Палитра" value={t.accent}
                   options={MQ_PRESETS.map((p) => p.hex)}
                   onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Реакции на ответы" />
      <TweakToggle label="Конфетти" value={t.confetti}
                   onChange={(v) => setTweak('confetti', v)} />
      <TweakToggle label="Вспышка по краям" value={t.flash}
                   onChange={(v) => setTweak('flash', v)} />
      <TweakToggle label="Звук" value={t.sound}
                   onChange={(v) => setTweak('sound', v)} />
      <TweakToggle label="Вибрация" value={t.haptics}
                   onChange={(v) => setTweak('haptics', v)} />

      <TweakSection label="Эффекты" />
      <TweakToggle label="Параллакс за курсором" value={t.parallax}
                   onChange={(v) => setTweak('parallax', v)} />
      <TweakToggle label="Зернистость (грейн)" value={t.grain}
                   onChange={(v) => setTweak('grain', v)} />
      <TweakButton label="🎉 Тест конфетти"
                   onClick={() => window.MQFx && window.MQFx.test('confetti')} />
      <TweakButton label="⭐ Тест level-up"
                   onClick={() => window.MQFx && window.MQFx.test('levelup')} />
    </TweaksPanel>
  );
}

(function mountMQTweaks() {
  let root = document.getElementById('mq-tweaks-root');
  if (!root) {
    root = document.createElement('div');
    root.id = 'mq-tweaks-root';
    document.body.appendChild(root);
  }
  ReactDOM.createRoot(root).render(<MQTweaksApp />);
})();