// app.jsx — Main composition: demo page + accessibility FAB & modal.
// Settings persist to localStorage; live-apply to .dp-page via attributes.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "modalStyle": "panel",
  "fabPosition": "bottom-right",
  "fabLanguage": "en",
  "appearance": "light",
  "openOnStart": true
}/*EDITMODE-END*/;

const STORAGE_KEY = 'foliant.a11y.settings.v1';

function loadStored() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
    return JSON.parse(raw);
  } catch (e) { return null; }
}
function saveStored(s) {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch (e) {}
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const demoRef = React.useRef(null);

  const [open, setOpen] = React.useState(t.openOnStart);
  const [settings, setSettings] = React.useState(() => loadStored() || A11Y_DEFAULTS);

  // Apply settings to the demo page on every change
  React.useEffect(() => {
    const root = demoRef.current?.querySelector('.dp-page');
    applySettings(root, settings);
    saveStored(settings);
  }, [settings]);

  return (
    <div className="demo-stage" ref={demoRef}>
      <div className="demo-scroll">
        <DemoPage />
      </div>

      <ReadingMask active={settings.readingMask} hostRef={demoRef} />

      <AccessibilityFAB
        open={open}
        position={t.fabPosition}
        dark={t.appearance === 'dark'}
        onClick={() => setOpen(!open)} />

      <AccessibilityModal
        open={open}
        style={t.modalStyle}
        position={t.fabPosition}
        dark={t.appearance === 'dark'}
        settings={settings}
        onChange={setSettings}
        onClose={() => setOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Plugin presentation" />
        <TweakRadio label="Appearance" value={t.appearance}
          options={['light','dark']}
          onChange={v => setTweak('appearance', v)} />
        <TweakRadio label="Modal style" value={t.modalStyle}
          options={['panel','dialog','drawer']}
          onChange={v => setTweak('modalStyle', v)} />
        <TweakRadio label="FAB position" value={t.fabPosition}
          options={['bottom-right','bottom-left','top-right']}
          onChange={v => setTweak('fabPosition', v)} />
        <TweakSection label="Demo state" />
        <TweakToggle label="Modal open on load" value={t.openOnStart}
          onChange={v => setTweak('openOnStart', v)} />
        <TweakButton label="Reset settings" onClick={() => setSettings({ ...A11Y_DEFAULTS })} />
      </TweaksPanel>
    </div>
  );
}

Object.assign(window, { App });