/* global React, ReactDOM, TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakRadio, TweakSelect, useTweaks */
const { useEffect } = React;

function Tweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply CSS variables / classes live
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--gold', t.accent);
    // derive deep + soft from accent (HSL shift would be nicer; here we just provide reasonable defaults if user picks)
    root.style.setProperty('--terracotta', t.terracotta);
    root.style.setProperty('--cream', t.creamBg);
    root.style.setProperty('--slate', t.slateBg);
    root.style.setProperty('--serif', `"${t.displayFont}", "Cormorant Garamond", Georgia, serif`);
    root.style.setProperty('--script', `"${t.scriptFont}", "Homemade Apple", cursive`);

    // hide script lettering if toggled off
    document.body.classList.toggle('no-script', !t.scriptOn);
    document.body.classList.toggle('no-chalk-texture', !t.chalkTexture);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks" defaultOpen={false}>
      <TweakSection title="Couleurs">
        <TweakColor
          label="Accent doré"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#c89544', '#b08454', '#d4a857', '#9a7530']}
        />
        <TweakColor
          label="Accent terracotta"
          value={t.terracotta}
          onChange={(v) => setTweak('terracotta', v)}
          options={['#a44a35', '#8b3a28', '#c1543f', '#7d4a3a']}
        />
        <TweakColor
          label="Fond crème"
          value={t.creamBg}
          onChange={(v) => setTweak('creamBg', v)}
          options={['#f3e7c9', '#f6ecd2', '#ede0bf', '#f9f2dc']}
        />
        <TweakColor
          label="Ardoise"
          value={t.slateBg}
          onChange={(v) => setTweak('slateBg', v)}
          options={['#232a26', '#1c2522', '#2d3a2f', '#1a2535']}
        />
      </TweakSection>

      <TweakSection title="Typographie">
        <TweakSelect
          label="Titre serif"
          value={t.displayFont}
          onChange={(v) => setTweak('displayFont', v)}
          options={[
            { value: 'DM Serif Display', label: 'DM Serif Display' },
            { value: 'Cormorant Garamond', label: 'Cormorant Garamond' },
            { value: 'Playfair Display', label: 'Playfair Display' },
            { value: 'Italiana', label: 'Italiana' },
          ]}
        />
        <TweakSelect
          label="Script craie"
          value={t.scriptFont}
          onChange={(v) => setTweak('scriptFont', v)}
          options={[
            { value: 'Caveat', label: 'Caveat' },
            { value: 'Kalam', label: 'Kalam' },
            { value: 'Homemade Apple', label: 'Homemade Apple' },
            { value: 'Shadows Into Light', label: 'Shadows Into Light' },
            { value: 'Reenie Beanie', label: 'Reenie Beanie' },
          ]}
        />
        <TweakToggle
          label="Touches manuscrites"
          checked={t.scriptOn}
          onChange={(v) => setTweak('scriptOn', v)}
        />
      </TweakSection>

      <TweakSection title="Ambiance">
        <TweakToggle
          label="Texture craie (ardoise)"
          checked={t.chalkTexture}
          onChange={(v) => setTweak('chalkTexture', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Inject extra Google Font links dynamically for selectable fonts
(function injectFonts() {
  const fams = ['Cormorant+Garamond:ital,wght@0,400;0,600;1,400', 'Playfair+Display:wght@400;700', 'Italiana', 'Kalam:wght@400;700', 'Homemade+Apple', 'Shadows+Into+Light', 'Reenie+Beanie'];
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?' + fams.map(f => 'family=' + f).join('&') + '&display=swap';
  document.head.appendChild(link);
})();

// Inject CSS for tweak-driven visibility toggles
(function injectCSS() {
  const css = `
    body.no-script .script,
    body.no-script .hero-eyebrow,
    body.no-script .section-header .script,
    body.no-script .signature,
    body.no-script .collage-tag,
    body.no-script .menu-category-head h3,
    body.no-script .menu-item-price,
    body.no-script .menu-footer .script,
    body.no-script .info-block h3,
    body.no-script .info-block li .time,
    body.no-script .map-label,
    body.no-script .priv-content .script,
    body.no-script .reservation-head .script,
    body.no-script .hero-scroll { font-family: var(--serif) !important; font-style: italic; transform: none !important; font-size: 0.7em; opacity: 0.85; }
    body.no-script .stat-num.script { font-family: var(--serif) !important; transform: none !important; font-size: 32px; }

    body.no-chalk-texture .hero::before,
    body.no-chalk-texture .carte::before { display: none; }
  `;
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);
})();

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