/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSlider */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "mixed",
  "accent": "acid",
  "animSpeed": 1,
  "formality": "casual"
}/*EDITMODE-END*/;

function SimpleColor({ value, options, colorMap, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 8, padding: '4px 0' }}>
      {options.map(opt => (
        <button
          key={opt}
          type="button"
          onClick={() => onChange(opt)}
          aria-label={opt}
          style={{
            width: 36, height: 36,
            borderRadius: 12,
            background: colorMap[opt],
            border: value === opt ? '2px solid #2F0DFF' : '2px solid rgba(0,0,0,0.1)',
            cursor: 'pointer',
          }}
        />
      ))}
    </div>
  );
}

function TweaksUIWrapper() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (window.applyTweaks) window.applyTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Тема">
        <TweakRadio
          value={t.theme}
          options={[
            { label: 'Микс', value: 'mixed' },
            { label: 'Светлая', value: 'all-light' },
          ]}
          onChange={v => setTweak('theme', v)}
        />
      </TweakSection>

      <TweakSection label="Акцент">
        <SimpleColor
          value={t.accent}
          options={['acid', 'cyan', 'violet']}
          colorMap={{ acid: '#C7FF54', cyan: '#48DCFF', violet: '#A99AFF' }}
          onChange={v => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection label="Скорость">
        <TweakSlider
          value={+t.animSpeed}
          min={0.4} max={2} step={0.1} unit="×"
          onChange={v => setTweak('animSpeed', v)}
        />
      </TweakSection>

      <TweakSection label="Тон копирайта">
        <TweakRadio
          value={t.formality}
          options={[
            { label: 'Уверенный', value: 'casual' },
            { label: 'Формальный', value: 'formal' },
          ]}
          onChange={v => setTweak('formality', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.addEventListener('DOMContentLoaded', () => {
  const mount = document.getElementById('tweaks-root');
  if (mount) {
    ReactDOM.createRoot(mount).render(<TweaksUIWrapper />);
  }
});