/* Tweaks app for WandEnt — live A/B of palettes, fonts, and layout.
 * Writes CSS custom properties / body classes so the whole site re-themes
 * instantly. Shown only when Tweaks mode is toggled on from the toolbar.
 */
const { useEffect } = React;

const FONT_SETS = {
  'Marquee (current)': { display: "'Marcellus',serif", serif: "'Cormorant Garamond',serif", body: "'Hanken Grotesk',sans-serif" },
  'Editorial':         { display: "'Playfair Display',serif", serif: "'Playfair Display',serif", body: "'Work Sans',sans-serif" },
  'Theatrical':        { display: "'Cinzel',serif", serif: "'Cormorant Garamond',serif", body: "'Outfit',sans-serif" },
  'Fashion':           { display: "'Bodoni Moda',serif", serif: "'Bodoni Moda',serif", body: "'Mulish',sans-serif" },
  'Modern Serif':      { display: "'DM Serif Display',serif", serif: "'Spectral',serif", body: "'Manrope',sans-serif" },
  'Literary':          { display: "'Libre Baskerville',serif", serif: "'Libre Baskerville',serif", body: "'Work Sans',sans-serif" },
  'Contemporary':      { display: "'Syne',sans-serif", serif: "'Spectral',serif", body: "'Space Grotesk',sans-serif" },
};

// [bg, bg2, panel, gold, gold-2, cream, muted, line] — distinct accents so the
// difference reads at a glance (accent drives buttons, eyebrows, labels, links).
const PALETTES = {
  'Midnight Gold': ['#0c0b0f', '#131119', '#17151e', '#c9a25a', '#e7cd93', '#efe9dd', '#a39c93', 'rgba(232,210,160,0.16)'],
  'Rose Noir':     ['#0f0b0c', '#161016', '#1b141a', '#d98a72', '#f0b6a3', '#f1e9e6', '#ab9d99', 'rgba(217,138,114,0.18)'],
  'Emerald Noir':  ['#080f0c', '#0d1512', '#121b17', '#3fae73', '#86e0b0', '#e6efe9', '#93a39a', 'rgba(63,174,115,0.16)'],
  'Sapphire Ice':  ['#090d16', '#0f1422', '#141a2a', '#6f9ce0', '#a9c7ef', '#e6ebf1', '#9aa3b5', 'rgba(111,156,224,0.18)'],
  'Amethyst':      ['#0d0a14', '#13101c', '#181422', '#b58ad9', '#d2b6ef', '#ece6f1', '#a89db0', 'rgba(181,138,217,0.18)'],
  'Crimson Velvet':['#120a0b', '#19100f', '#1e1413', '#e0685e', '#f2a89f', '#f1e8e6', '#ab9893', 'rgba(224,104,94,0.18)'],
  'Teal Glow':     ['#081012', '#0d161a', '#121d20', '#4fc4c4', '#9ee3e3', '#e4eff0', '#90a3a4', 'rgba(79,196,196,0.18)'],
  'Champagne':     ['#0e0d0a', '#15130d', '#1a1812', '#d8c08a', '#efe2bf', '#f3eee2', '#a8a08c', 'rgba(216,192,138,0.16)'],
  'Copper Dusk':   ['#100b09', '#17110d', '#1c1611', '#cf8a52', '#ecb784', '#f1e7df', '#aa9a8c', 'rgba(207,138,82,0.18)'],
  'Bronze Olive':  ['#0d0e09', '#13150d', '#181b12', '#b8a martin', '#d8cf8e', '#ecebde', '#9ba08c', 'rgba(193,179,108,0.16)'],
  'Ruby Gold':     ['#110a0c', '#180f12', '#1d1418', '#c95a78', '#e79bb0', '#f1e6ea', '#a8939b', 'rgba(201,90,120,0.18)'],
  'Ocean Brass':   ['#08110f', '#0d1715', '#121d1b', '#4fb59a', '#97dcc8', '#e4efec', '#90a39d', 'rgba(79,181,154,0.17)'],
  'Indigo Night':  ['#0a0b16', '#0f1020', '#141528', '#7a82e0', '#aab0ef', '#e7e8f3', '#9a9db5', 'rgba(122,130,224,0.18)'],
  'Plum Rose':     ['#110a12', '#18101a', '#1d1422', '#c87ab0', '#e7aed4', '#f1e6ef', '#a8939f', 'rgba(200,122,176,0.18)'],
  'Forest Cream':  ['#0a0f0b', '#0f1510', '#141b15', '#7faa63', '#b3d196', '#eaeede', '#97a38c', 'rgba(127,170,99,0.16)'],
  'Steel Blue':    ['#0b0e11', '#10151a', '#151b21', '#7fa8c4', '#aecde0', '#e8eef2', '#94a0aa', 'rgba(127,168,196,0.17)'],
  'Garnet Smoke':  ['#100b0c', '#170f11', '#1c1416', '#b56a6a', '#dba0a0', '#efe7e7', '#a89697', 'rgba(181,106,106,0.17)'],
  'Mojave Sand':   ['#0f0d0a', '#16130d', '#1b1812', '#d6b06f', '#eccd9c', '#f2ece0', '#a8a08e', 'rgba(214,176,111,0.16)'],
  'Aubergine':     ['#0c0911', '#120e19', '#171121', '#9a7ad9', '#c0aaef', '#eae6f1', '#a09bb0', 'rgba(154,122,217,0.18)'],
  'Slate Mint':    ['#0a0f0e', '#0f1514', '#141b1a', '#6fc4a8', '#a3e3cd', '#e6efec', '#90a39c', 'rgba(111,196,168,0.17)'],
};
// guard typo
PALETTES['Bronze Olive'][3] = '#c1b36c';

const SHAPES = { 'Squircle': '', 'Circle': 'shape-circle', 'Square': 'shape-square' };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontSet": "Marquee (current)",
  "palette": "Midnight Gold",
  "rosterCols": "3",
  "photoShape": "Squircle",
  "cardRadius": 22,
  "logoSpeed": 48,
  "logoGlow": false
}/*EDITMODE-END*/;

const rootStyle = () => document.documentElement.style;

function applyFonts(name) {
  const f = FONT_SETS[name] || FONT_SETS['Marquee (current)'];
  const r = rootStyle();
  r.setProperty('--font-display', f.display);
  r.setProperty('--font-serif', f.serif);
  r.setProperty('--font-body', f.body);
}
function applyPalette(name) {
  const p = PALETTES[name] || PALETTES['Midnight Gold'];
  const r = rootStyle();
  const k = ['--bg', '--bg2', '--panel', '--gold', '--gold-2', '--cream', '--muted', '--line'];
  k.forEach((key, i) => r.setProperty(key, p[i]));
}
function applyShape(name) {
  const cls = SHAPES[name];
  document.body.classList.remove('shape-circle', 'shape-square');
  if (cls) document.body.classList.add(cls);
}

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

  useEffect(() => { applyFonts(t.fontSet); }, [t.fontSet]);
  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { applyShape(t.photoShape); }, [t.photoShape]);
  useEffect(() => { rootStyle().setProperty('--roster-cols', String(t.rosterCols)); }, [t.rosterCols]);
  useEffect(() => { rootStyle().setProperty('--card-radius', t.cardRadius + 'px'); }, [t.cardRadius]);
  useEffect(() => {
    rootStyle().setProperty('--marquee-dur', t.logoSpeed + 's');
    rootStyle().setProperty('--marquee-dur-rev', Math.round(t.logoSpeed * 0.72) + 's');
  }, [t.logoSpeed]);
  useEffect(() => { document.body.classList.toggle('logo-glow', !!t.logoGlow); }, [t.logoGlow]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginTop: 2 }}>
        {Object.keys(FONT_SETS).map((name) => {
          const f = FONT_SETS[name];
          const active = t.fontSet === name;
          return (
            <button key={name} type="button" onClick={() => setTweak('fontSet', name)}
              title={name}
              style={{
                display: 'flex', alignItems: 'baseline', gap: 8, width: '100%',
                padding: '8px 11px', cursor: 'pointer', textAlign: 'left',
                background: active ? 'rgba(255,255,255,.09)' : 'transparent',
                border: active ? '1px solid rgba(255,255,255,.45)' : '1px solid rgba(255,255,255,.10)',
                borderRadius: 8, transition: '.15s',
              }}>
              <span style={{ fontFamily: f.display, fontSize: 17, color: active ? '#fff' : 'rgba(255,255,255,.82)', lineHeight: 1 }}>{name}</span>
              <span style={{ fontFamily: f.body, fontSize: 10.5, letterSpacing: '.04em', color: 'rgba(255,255,255,.4)', marginLeft: 'auto', whiteSpace: 'nowrap' }}>Aa</span>
              {active && <span style={{ fontSize: 12, color: '#fff' }}>✓</span>}
            </button>
          );
        })}
      </div>

      <TweakSection label="Color palette" />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 2 }}>
        {Object.keys(PALETTES).map((name) => {
          const p = PALETTES[name];
          const active = t.palette === name;
          return (
            <button key={name} type="button" onClick={() => setTweak('palette', name)}
              title={name}
              style={{
                display: 'flex', alignItems: 'center', gap: 9, width: '100%',
                padding: '6px 9px', cursor: 'pointer', textAlign: 'left',
                background: active ? 'rgba(255,255,255,.09)' : 'transparent',
                border: active ? '1px solid rgba(255,255,255,.45)' : '1px solid rgba(255,255,255,.10)',
                borderRadius: 8, transition: '.15s',
              }}>
              <span style={{ display: 'flex', gap: 3, flex: '0 0 auto' }}>
                {[p[3], p[4], p[0], p[2]].map((c, i) => (
                  <span key={i} style={{ width: 16, height: 16, borderRadius: 4, background: c, border: '1px solid rgba(255,255,255,.16)' }} />
                ))}
              </span>
              <span style={{ fontSize: 12.5, color: active ? '#fff' : 'rgba(255,255,255,.72)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</span>
              {active && <span style={{ marginLeft: 'auto', fontSize: 12, color: '#fff' }}>✓</span>}
            </button>
          );
        })}
      </div>

      <TweakSection label="Roster layout" />
      <TweakRadio label="Columns" value={String(t.rosterCols)}
        options={['3', '4']} onChange={(v) => setTweak('rosterCols', v)} />
      <TweakRadio label="Photo shape" value={t.photoShape}
        options={Object.keys(SHAPES)} onChange={(v) => setTweak('photoShape', v)} />
      <TweakSlider label="Card roundness" value={t.cardRadius} min={0} max={32} unit="px"
        onChange={(v) => setTweak('cardRadius', v)} />

      <TweakSection label="Logo marquee" />
      <TweakSlider label="Scroll time" value={t.logoSpeed} min={20} max={90} unit="s"
        onChange={(v) => setTweak('logoSpeed', v)} />

      <TweakSection label="Brand" />
      <TweakToggle label="Logo glow" value={t.logoGlow}
        onChange={(v) => setTweak('logoGlow', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);