/* global React, ReactDOM, I18nProvider, ThemeProvider, TopBar, Hub, TOOL_VIEWS,
   useHashRoute, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */
/* ============================================================
   app.jsx — Top-level App + router + Tweaks wiring
   ============================================================ */

const { useEffect: useEff, useState: useSt } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cardStyle": "soft",
  "layout": "horiz",
  "mdStyle": "gfm",
  "dropzone": "default"
}/*EDITMODE-END*/;

function AppRoot() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Publish to window for tool components (they read once on render)
  useEff(() => { window.__cv_tweaks = tweaks; }, [tweaks]);
  // Force re-render of tool components when tweaks change (since they read window)
  return (
    <I18nProvider>
      <ThemeProvider>
        <Shell tweaks={tweaks} setTweak={setTweak} />
      </ThemeProvider>
    </I18nProvider>
  );
}

function Shell({ tweaks, setTweak }) {
  const route = useHashRoute();
  const { t } = window.useI18n();
  // Re-render observer for tweaks updates within tool views
  // (tool views read from window.__cv_tweaks; we just need them to remount/update)
  const tweakKey = `${tweaks.cardStyle}|${tweaks.layout}|${tweaks.mdStyle}|${tweaks.dropzone}`;

  let body = null;
  if (route.name === 'tool') {
    const ToolView = TOOL_VIEWS[route.toolId];
    body = ToolView ? <ToolView key={tweakKey} restoreId={route.restoreId} /> : <Hub key={tweakKey} />;
  } else {
    body = <Hub key={tweakKey} />;
  }

  return (
    <div className="app">
      <TopBar />
      {body}
      <TweaksPanel title={t('common_options')}>
        <TweakSection label={t('tweak_card_style')} />
        <TweakRadio
          label=""
          value={tweaks.cardStyle}
          options={[
            { value: 'soft',   label: t('tweak_card_style_soft') },
            { value: 'flat',   label: t('tweak_card_style_flat') },
            { value: 'tinted', label: t('tweak_card_style_tinted') },
            { value: 'bold',   label: t('tweak_card_style_bold') },
          ]}
          onChange={v => setTweak('cardStyle', v)}
        />
        <TweakSection label={t('tweak_layout')} />
        <TweakRadio
          label=""
          value={tweaks.layout}
          options={[
            { value: 'horiz', label: t('tweak_layout_horiz') },
            { value: 'vert',  label: t('tweak_layout_vert') },
          ]}
          onChange={v => setTweak('layout', v)}
        />
        <TweakSection label={t('tweak_md_style')} />
        <TweakRadio
          label=""
          value={tweaks.mdStyle}
          options={[
            { value: 'gfm',   label: t('tweak_md_style_gfm') },
            { value: 'plain', label: t('tweak_md_style_plain') },
            { value: 'emoji', label: t('tweak_md_style_emoji') },
          ]}
          onChange={v => setTweak('mdStyle', v)}
        />
        <TweakSection label={t('tweak_dropzone')} />
        <TweakRadio
          label=""
          value={tweaks.dropzone}
          options={[
            { value: 'default',   label: t('tweak_dropzone_default') },
            { value: 'minimal',   label: t('tweak_dropzone_minimal') },
            { value: 'grid',      label: t('tweak_dropzone_grid') },
            { value: 'blueprint', label: t('tweak_dropzone_blueprint') },
          ]}
          onChange={v => setTweak('dropzone', v)}
        />
      </TweaksPanel>
    </div>
  );
}

// Bootstrap
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AppRoot />);