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

function applyRosterTweaks(t) {
  if (t.accent) document.documentElement.style.setProperty('--accent', t.accent);
  if (window.IFC_ROSTER && t.rosterLayout) {
    window.IFC_ROSTER.setLayout(t.rosterLayout);
  }
}

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

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Squad Layout">
        <TweakRadio
          label="Roster view"
          value={t.rosterLayout}
          onChange={(v) => setTweak('rosterLayout', v)}
          options={[
            { value: 'grid',     label: 'Grid' },
            { value: 'table',    label: 'Table' },
            { value: 'position', label: 'By Position' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Style">
        <TweakColor label="Accent" value={t.accent} onChange={(v) => setTweak('accent', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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

// Apply defaults immediately
applyRosterTweaks(window.IFC_TWEAKS || {});