/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dusk",
  "primary": "#8b82d8",
  "accent": "#d6a45a",
  "palette": ["#8b82d8", "#d6a45a"],
  "font": "grotesque",
  "hero": "split",
  "card": "portrait"
}/*EDITMODE-END*/;

// theme preset default accent/primary pairs
const THEMES = {
  spotlight: { primary: '#6a52e6', accent: '#ffb43e' },
  dusk:      { primary: '#8b82d8', accent: '#d6a45a' },
  confetti:  { primary: '#7b3ff2', accent: '#ff5c8a' },
  velvet:    { primary: '#d6a14a', accent: '#e85d8a' },
  noir:      { primary: '#c7c9d6', accent: '#e3b864' },
  pinewood:  { primary: '#5fae84', accent: '#e0a24c' },
  ember:     { primary: '#d97a4e', accent: '#e8b25a' },
  abyss:     { primary: '#4fb3b8', accent: '#e6b15c' },
  slate:     { primary: '#4c5fb0', accent: '#c98a3c' },
  bone:      { primary: '#766a57', accent: '#b07d3f' },
};

const FONTSETS = {
  grotesque: { label: 'Grotesque Pop',   display: "'Bricolage Grotesque', sans-serif", body: "'Hanken Grotesque', system-ui, sans-serif" },
  neo:       { label: 'Neo Grotesk',     display: "'Syne', sans-serif",                 body: "'Manrope', sans-serif" },
  editorial: { label: 'Editorial Serif', display: "'Instrument Serif', serif",          body: "'Figtree', sans-serif" },
  mega:      { label: 'Mega Display',     display: "'Unbounded', sans-serif",            body: "'DM Sans', sans-serif" },
  swiss:     { label: 'Clean Swiss',      display: "'Familjen Grotesk', sans-serif",     body: "'Public Sans', sans-serif" },
  fun:       { label: 'Rounded Fun',      display: "'Fredoka', sans-serif",              body: "'Nunito', sans-serif" },
};

const PRIMARIES = ['#6a52e6', '#7b3ff2', '#4a35c2', '#2a6fdb', '#3b82f6', '#0ea5a3', '#10b981', '#1f8a5b', '#d6a14a', '#ff7a18', '#e11d48', '#e0457b', '#ff5c8a', '#8b5cf6', '#34e3d0', '#0f172a'];
const ACCENTS   = ['#ffb43e', '#ffd23e', '#ff6f91', '#ff5db1', '#ff7a59', '#34e3d0', '#7bdff2', '#b48bff', '#a3e635', '#fb923c', '#f472b6', '#e85d8a'];
const PALETTES  = [['#6a52e6', '#ffb43e'], ['#7b3ff2', '#ff5c8a'], ['#0ea5a3', '#ffd23e'], ['#e11d48', '#ffb43e'], ['#2a6fdb', '#ff7a59'], ['#d6a14a', '#e85d8a'], ['#10b981', '#b48bff'], ['#0f172a', '#34e3d0']];

// Visual font picker: renders each option in its own typeface
function FontPicker({ value, onChange }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {Object.keys(FONTSETS).map((k) => {
        const f = FONTSETS[k];
        const active = value === k;
        return (
          <button key={k} type="button" onClick={() => onChange(k)}
            style={{
              textAlign: 'left', cursor: 'pointer', width: '100%',
              padding: '9px 11px', borderRadius: 9,
              background: active ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.5)',
              border: active ? '1.5px solid var(--accent, #d6a45a)' : '.5px solid rgba(0,0,0,0.12)',
              transition: 'border-color .15s, background .15s', display: 'block',
            }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontFamily: f.display, fontSize: 22, fontWeight: 700, lineHeight: 1, color: '#29261b', letterSpacing: '-0.02em' }}>Hypnotism</span>
              <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase', color: active ? 'var(--primary-deep, #6b61bd)' : 'rgba(41,38,27,0.5)', flex: 'none', fontWeight: 600 }}>{active ? '● ' : ''}{f.label}</span>
            </div>
            <div style={{ fontFamily: f.body, fontSize: 12, color: 'rgba(41,38,27,0.66)', marginTop: 4, lineHeight: 1.3 }}>The Grad Night they’ll never forget.</div>
          </button>
        );
      })}
    </div>
  );
}

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-theme', t.theme);
    r.setAttribute('data-card', t.card);
    if (r.getAttribute('data-hero') !== t.hero) {
      r.setAttribute('data-hero', t.hero);
      if (window.Mesmer && window.Mesmer.renderHero) window.Mesmer.renderHero();
    }
    // color overrides (sit on top of the theme)
    const p = t.primary, a = t.accent;
    r.style.setProperty('--primary', p);
    r.style.setProperty('--primary-deep', `color-mix(in oklab, ${p} 78%, black)`);
    r.style.setProperty('--primary-tint', `color-mix(in oklab, ${p} 14%, white)`);
    r.style.setProperty('--accent', a);
    // font set
    const f = FONTSETS[t.font] || FONTSETS.grotesque;
    r.style.setProperty('--font-display', f.display);
    r.style.setProperty('--font-body', f.body);
  }, [t.theme, t.primary, t.accent, t.font, t.hero, t.card]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand palette" />
      <TweakSelect label="Theme preset" value={t.theme}
        options={[
          { value: 'dusk', label: 'Electric Dusk (dark)' },
          { value: 'noir', label: 'Noir (dark)' },
          { value: 'pinewood', label: 'Pinewood (dark)' },
          { value: 'ember', label: 'Ember (dark)' },
          { value: 'abyss', label: 'Abyss (dark)' },
          { value: 'velvet', label: 'Velvet Premium (dark)' },
          { value: 'slate', label: 'Slate (light)' },
          { value: 'bone', label: 'Bone (light)' },
          { value: 'spotlight', label: 'Midnight Spotlight (light)' },
          { value: 'confetti', label: 'Confetti Pop (light)' },
        ]}
        onChange={(v) => setTweak({ theme: v, primary: THEMES[v].primary, accent: THEMES[v].accent, palette: [THEMES[v].primary, THEMES[v].accent] })} />
      <TweakColor label="Quick palette" value={t.palette} options={PALETTES}
        onChange={(v) => setTweak({ palette: v, primary: v[0], accent: v[1] })} />
      <TweakColor label="Primary" value={t.primary} options={PRIMARIES}
        onChange={(v) => setTweak('primary', v)} />
      <TweakColor label="Accent" value={t.accent} options={ACCENTS}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Typeface set" />
      <FontPicker value={t.font} onChange={(v) => setTweak('font', v)} />

      <TweakSection label="Hero treatment" />
      <TweakRadio label="Layout" value={t.hero}
        options={['split', 'spotlight', 'marquee']}
        onChange={(v) => setTweak('hero', v)} />

      <TweakSection label="Roster card layout" />
      <TweakRadio label="Style" value={t.card}
        options={['portrait', 'row', 'overlay']}
        onChange={(v) => setTweak('card', v)} />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.createElement('div');
  el.id = 'tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<MesmerTweaks />);
})();