// Tweaks panel for the prototype
const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;

function AppTweaks() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply density to root
  React.useEffect(() => {
    document.documentElement.style.setProperty("--row-py", tweaks.density === "compact" ? "8px" : "14px");
  }, [tweaks.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Display">
        <TweakRadio label="Density" value={tweaks.density} options={["compact", "comfortable"]} onChange={v => setTweak("density", v)}/>
        <TweakRadio label="Score viz" value={tweaks.scoreViz} options={["both", "ring", "bars"]} onChange={v => setTweak("scoreViz", v)}/>
      </TweakSection>
      <TweakSection title="AI behavior">
        <TweakSelect label="AI tone" value={tweaks.aiTone} options={["cautious", "confident", "structured"]} onChange={v => setTweak("aiTone", v)}/>
        <TweakToggle label="Fairness banners" value={tweaks.showFairness} onChange={v => setTweak("showFairness", v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

window.AppTweaks = AppTweaks;
window.useTweaks = useTweaks;