/* MADNESS Kickstarter — Tweaks */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;

const SPORT_OVERLAYS = {
  master:    { c: '#FF5A1F', cdim: '#C2410C', label: 'Master Orange' },
  hoops:     { c: '#F26B1F', cdim: '#C2410C', label: 'Hoops · Orange' },
  gridiron:  { c: '#3B82F6', cdim: '#1E3A8A', label: 'Gridiron · Royal Blue' },
  cricket:   { c: '#D6A356', cdim: '#A87F4E', label: 'Cricket · Ochre' },
  volley:    { c: '#8B5CF6', cdim: '#6D28D9', label: 'Volley · Purple' },
  wrestling: { c: '#DC2626', cdim: '#991B1B', label: 'Wrestling · Crimson' },
  rugby:     { c: '#14532D', cdim: '#0B3A1F', label: 'Rugby · Forest' },
  handball:  { c: '#D97706', cdim: '#B45309', label: 'Handball · Amber' },
  hockey:    { c: '#38BDF8', cdim: '#0284C7', label: 'Hockey · Ice' },
  soccer:    { c: '#84CC16', cdim: '#65A30D', label: 'Soccer · Lime' },
  tennis:    { c: '#16A34A', cdim: '#15803D', label: 'Tennis · Court' },
  baseball:  { c: '#DC2626', cdim: '#0F172A', label: 'Baseball · Red' },
  boxing:    { c: '#EAB308', cdim: '#A16207', label: 'Boxing · Gold' },
  mma:       { c: '#F4F2EE', cdim: '#A1A1AA', label: 'MMA · Bone' },
  racing:    { c: '#94A3B8', cdim: '#475569', label: 'Racing · Silver' },
};

function applyOverlay(key) {
  const o = SPORT_OVERLAYS[key] || SPORT_OVERLAYS.master;
  document.documentElement.style.setProperty('--sport', o.c);
  document.documentElement.style.setProperty('--sport-dim', o.cdim);
  if (key !== 'master') {
    document.documentElement.style.setProperty('--orange', o.c);
    document.documentElement.style.setProperty('--orange-dim', o.cdim);
  } else {
    document.documentElement.style.setProperty('--orange', 'oklch(72% 0.17 48)');
    document.documentElement.style.setProperty('--orange-dim', 'oklch(55% 0.13 48)');
  }
}
function applyDensity(d) {
  document.documentElement.style.setProperty('--density', d === 'compact' ? '0.7' : d === 'spacious' ? '1.3' : '1');
}

function App() {
  const [tweaks, setTweak] = useTweaks(window.MADNESS_TWEAKS);
  React.useEffect(() => { applyOverlay(tweaks.sportOverlay); }, [tweaks.sportOverlay]);
  React.useEffect(() => { applyDensity(tweaks.density); }, [tweaks.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Sport color overlay">
        <TweakSelect label="Cycle the 14" value={tweaks.sportOverlay} onChange={v => setTweak("sportOverlay", v)}
          options={Object.entries(SPORT_OVERLAYS).map(([k, v]) => ({ value: k, label: v.label }))}/>
      </TweakSection>
      <TweakSection label="Density">
        <TweakRadio label="Density" value={tweaks.density} onChange={v => setTweak("density", v)}
          options={[
            { value: "compact", label: "Compact" },
            { value: "comfortable", label: "Comfortable" },
            { value: "spacious", label: "Spacious" },
          ]}/>
      </TweakSection>
    </TweaksPanel>
  );
}

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