/* Tweaks island — drives theming for both pages.
   Loaded after React + Babel + tweaks-panel.jsx. */
const { useEffect } = React;

const ALH_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "edition",
  "accent": "#b1542e",
  "titrage": "Normal",
  "calligraphie": true,
  "fontScale": 100
}/*EDITMODE-END*/;

const DIRECTIONS = {
  "Maison d'édition": "edition",
  "Atelier du calligraphe": "atelier",
  "Manuscrit moderne": "manuscrit"
};
const DIR_LABEL = { edition: "Maison d'édition", atelier: "Atelier du calligraphe", manuscrit: "Manuscrit moderne" };
const WEIGHTS = { "Léger": 400, "Normal": 600, "Gras": 700 };

function TweakApp() {
  const [t, setTweak] = useTweaks(ALH_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-direction', t.direction || 'edition');
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--display-w', String(WEIGHTS[t.titrage] || 600));
    root.style.setProperty('--fs', (t.fontScale || 100) / 100);
    document.body.style.fontSize = `calc(1rem * ${(t.fontScale || 100) / 100})`;
    if (t.calligraphie) root.style.removeProperty('--calli-opacity');
    else root.style.setProperty('--calli-opacity', '0');
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction visuelle" />
      <TweakSelect
        label="Direction"
        value={DIR_LABEL[t.direction] || "Maison d'édition"}
        options={Object.keys(DIRECTIONS)}
        onChange={(v) => setTweak('direction', DIRECTIONS[v])}
      />
      <TweakSection label="Identité" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#b1542e', '#a8432a', '#c0843a', '#8a6d2f', '#9c4a3c']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Titrage"
        value={t.titrage}
        options={['Léger', 'Normal', 'Gras']}
        onChange={(v) => setTweak('titrage', v)}
      />
      <TweakToggle
        label="Calligraphie en filigrane"
        value={t.calligraphie}
        onChange={(v) => setTweak('calligraphie', v)}
      />
      <TweakSection label="Lisibilité" />
      <TweakSlider
        label="Taille du texte" value={t.fontScale} min={90} max={115} step={1} unit="%"
        onChange={(v) => setTweak('fontScale', v)}
      />
    </TweaksPanel>
  );
}

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