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

function applyTweaks(t) {
  // Hero variant
  const hero = document.getElementById('hero');
  if (hero) hero.setAttribute('data-variant', t.heroVariant || 'poster');

  // Accent color
  if (t.accent) document.documentElement.style.setProperty('--accent', t.accent);

  // Climb
  const climb = document.getElementById('climb');
  if (climb) climb.setAttribute('data-show', t.showClimb ? 'true' : 'false');

  // Form strip
  const strip = document.getElementById('formstrip');
  if (strip) strip.setAttribute('data-position', t.showFormStrip ? 'below-hero' : 'hidden');

  // Nav next-match
  const navNm = document.getElementById('navNextMatch');
  if (navNm) navNm.style.display = t.showNavNextMatch ? '' : 'none';

  // Sticky tryouts aside
  const aside = document.querySelector('.tryouts__aside');
  if (aside) aside.style.position = t.stickyTryoutsAside ? '' : 'static';

  // Fixture mode
  const split = document.querySelector('.matches-split');
  if (split) {
    split.style.gridTemplateColumns = t.fixtureMode === 'stacked' ? '1fr' : '';
  }
}

function IFCTweaks() {
  const defaults = window.IFC_TWEAKS || {};
  const [t, setTweak] = useTweaks(defaults);

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          onChange={(v) => setTweak('heroVariant', v)}
          options={[
            { value: 'poster', label: 'Poster' },
            { value: 'classic', label: 'Classic' },
          ]}
        />
        <TweakColor label="Accent" value={t.accent} onChange={(v) => setTweak('accent', v)} />
      </TweakSection>

      <TweakSection title="Sections">
        <TweakToggle label="Climb ladder" value={t.showClimb} onChange={(v) => setTweak('showClimb', v)} />
        <TweakToggle label="Form strip" value={t.showFormStrip} onChange={(v) => setTweak('showFormStrip', v)} />
        <TweakToggle label="Next match in nav" value={t.showNavNextMatch} onChange={(v) => setTweak('showNavNextMatch', v)} />
        <TweakToggle label="Sticky tryouts aside" value={t.stickyTryoutsAside} onChange={(v) => setTweak('stickyTryoutsAside', v)} />
      </TweakSection>

      <TweakSection title="Match Center">
        <TweakRadio
          label="Fixtures layout"
          value={t.fixtureMode}
          onChange={(v) => setTweak('fixtureMode', v)}
          options={[
            { value: 'split', label: 'Split' },
            { value: 'stacked', label: 'Stacked' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const mount = document.createElement('div');
document.body.appendChild(mount);
ReactDOM.createRoot(mount).render(<IFCTweaks />);

// Apply defaults immediately so the page reflects them on first paint
applyTweaks(window.IFC_TWEAKS || {});