/* Tweaks panel app (home page only). Applies live + mirrors to localStorage
   so the Chronologie and Actualités sub-pages inherit the same settings. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "placeholder": "flat",
  "density": "regular",
  "annotations": true
}/*EDITMODE-END*/;

function WireframeTweaks() {
  // seed from the persisted store: on plain static hosting the EDITMODE block
  // is never rewritten, so defaults alone would clobber saved choices on load
  const [t, setTweak] = useTweaks({
    ...TWEAK_DEFAULTS,
    ...((window.AlinaTweaks && window.AlinaTweaks.load()) || {})
  });

  React.useEffect(() => {
    if (window.AlinaTweaks) {
      window.AlinaTweaks.apply(t);
      window.AlinaTweaks.save(t);
    }
  }, [t.placeholder, t.density, t.annotations]);

  return (
    <TweaksPanel title="Wireframe">
      <TweakSection label="Image placeholders" />
      <TweakRadio label="Fill" value={t.placeholder}
        options={['flat', 'hatch']}
        onChange={(v) => setTweak('placeholder', v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)} />

      <TweakSection label="Annotations" />
      <TweakToggle label="Show route hints" value={t.annotations}
        onChange={(v) => setTweak('annotations', v)} />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.createElement('div');
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<WireframeTweaks />);
})();