/* Tweaks panel wiring. */
const { useEffect: useTE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "comfortable",
  "fontPair": "garamond",
  "showFlavor": true,
  "showDetriments": true,
  "predatorPrey": false,
  "plainReadings": false
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  garamond:  { display: "'Cormorant Garamond', serif", body: "'Crimson Pro', serif" },
  spectral:  { display: "'Spectral', serif",          body: "'Spectral', serif" },
  cinzel:    { display: "'Cinzel', serif",            body: "'EB Garamond', serif" },
  uncial:    { display: "'Uncial Antiqua', serif",    body: "'EB Garamond', serif" },
};

const TweaksWiring = ({ tweaks, setTweaks }) => {
  // Apply theme + density + fonts to root
  useTE(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
    const pair = FONT_PAIRS[tweaks.fontPair] || FONT_PAIRS.garamond;
    document.documentElement.style.setProperty("--serif-display", pair.display);
    document.documentElement.style.setProperty("--serif-body", pair.body);
  }, [tweaks.theme, tweaks.density, tweaks.fontPair]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Appearance">
        <TweakRadio label="Theme" value={tweaks.theme} onChange={(v) => setTweaks({ theme: v })}
          options={[{value:"parchment", label:"Parchment"}, {value:"dark", label:"Candlelit"}, {value:"blood", label:"Blood-warm"}]} />
        <TweakRadio label="Density" value={tweaks.density} onChange={(v) => setTweaks({ density: v })}
          options={[{value:"comfortable", label:"Comfortable"}, {value:"compact", label:"Compact"}]} />
        <TweakSelect label="Font pairing" value={tweaks.fontPair} onChange={(v) => setTweaks({ fontPair: v })}
          options={[
            {value:"garamond", label:"Cormorant + Crimson"},
            {value:"spectral", label:"Spectral throughout"},
            {value:"cinzel",   label:"Cinzel + Garamond"},
            {value:"uncial",   label:"Uncial + Garamond"},
          ]} />
      </TweakSection>
      <TweakSection label="Content">
        <TweakToggle label="Show flavor text on backgrounds" value={tweaks.showFlavor} onChange={(v) => setTweaks({ showFlavor: v })} />
        <TweakToggle label="Show detriments alongside traits" value={tweaks.showDetriments} onChange={(v) => setTweaks({ showDetriments: v })} />
        <TweakToggle label="Group clades by predator/prey" value={tweaks.predatorPrey} onChange={(v) => setTweaks({ predatorPrey: v })} />
        <TweakToggle label="Plain-language readings on hover" value={tweaks.plainReadings} onChange={(v) => setTweaks({ plainReadings: v })} />
      </TweakSection>
    </TweaksPanel>
  );
};

window.TweakDefaults = TWEAK_DEFAULTS;
window.TweaksWiring = TweaksWiring;