// Tweaks pour le site LaPioche
// Applique les variables CSS sur :root et propage les changements.

function TweaksApp() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    // mode nuit d'abord — pour décider si on applique la palette ou pas
    root.dataset.night = t.night ? "true" : "false";

    if (t.night) {
      // En mode nuit, on laisse le bloc :root[data-night="true"] décider
      // des couleurs (sinon les setProperty inline overrideraient).
      root.style.removeProperty('--ink');
      root.style.removeProperty('--accent');
      root.style.removeProperty('--paper');
    } else {
      const [ink, accent, paper] = t.palette || [];
      if (ink) root.style.setProperty('--ink', ink);
      if (accent) root.style.setProperty('--accent', accent);
      if (paper) root.style.setProperty('--paper', paper);
    }
    root.style.setProperty('--grain-opacity', String(t.grain));

    // typo titres
    const titleFontStack = {
      "Instrument Serif": '"Instrument Serif", "Newsreader", serif',
      "Gloock": '"Gloock", "Instrument Serif", serif',
      "Newsreader": '"Newsreader", "Instrument Serif", serif',
      "Caveat (manuscrit)": '"Caveat", "Reenie Beanie", cursive',
    }[t.titleFont] || '"Instrument Serif", serif';
    root.style.setProperty('--font-display', titleFontStack);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · LaPioche">
      <TweakSection label="Encre & papier" />
      <TweakColor
        label="Palette"
        value={t.palette}
        options={[
          ["#1F3FB0", "#B71B26", "#F5EED9"],   // d'origine — bleu marine & cire rouge
          ["#1A1A1A", "#B71B26", "#F5EED9"],   // encre noire, accents rouges
          ["#1F6B4B", "#D27419", "#F4ECDA"],   // forêt & cuivre
          ["#3B1E73", "#E0903A", "#F2EAD3"],   // pourpre & safran
          ["#0E2A3D", "#E63462", "#EFE9DC"],   // bleu nuit & fuchsia
        ]}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakSlider
        label="Grain du papier"
        value={t.grain}
        min={0} max={1} step={0.05}
        onChange={(v) => setTweak('grain', v)}
      />
      <TweakToggle
        label="Mode nuit (encre claire)"
        value={t.night}
        onChange={(v) => setTweak('night', v)}
      />

      <TweakSection label="Typographie" />
      <TweakSelect
        label="Police des titres"
        value={t.titleFont}
        options={["Instrument Serif", "Gloock", "Newsreader", "Caveat (manuscrit)"]}
        onChange={(v) => setTweak('titleFont', v)}
      />
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<TweaksApp />);