// sv-app.jsx — application shell : state routing, i18n, body-background controller.
/* global React, ReactDOM, Featured, SeriesIndex, SerieView, BlogList, BlogPost, Info, Header, MenuOverlay */
const { useState: aS, useEffect: aE, useCallback: aC } = React;

function App() {
  const DATA = window.JP_DATA;

  const [lang, setLang] = aS('fr');
  const [menuOpen, setMenuOpen] = aS(false);
  // view : { name: 'featured'|'series'|'blog'|'post'|'info'|'serie', serieId?, slug? }
  const [view, setView] = aS({ name: 'featured' });
  const [prevView, setPrevView] = aS({ name: 'featured' });

  const t = DATA.i18n[lang];

  /* --- Body background / scroll controller --------------------------
     Series view → light canvas (drives the 1s cross-view transition).
     Solid canvases (index/blog/post/info) disable header backdrop-filter. */
  const SOLID_VIEWS = ['series', 'blog', 'post', 'info'];
  aE(() => {
    const b = document.body;
    const light = view.name === 'serie';
    b.classList.toggle('canvas-light', light);
    // Solid canvas = no photo behind header → drop backdrop-filter.
    b.classList.toggle('canvas-solid', SOLID_VIEWS.indexOf(view.name) !== -1);
  }, [view]);

  aE(() => {
    document.body.classList.toggle('no-scroll', menuOpen);
  }, [menuOpen]);

  // Scroll to top on view change.
  aE(() => { window.scrollTo(0, 0); }, [view.name, view.serieId, view.slug]);

  /* --- Navigation --------------------------------------------------- */
  const navigate = aC((next) => {
    setView((cur) => { setPrevView(cur); return next; });
    setMenuOpen(false);
  }, []);

  const openSerie = aC((serieId) => {
    navigate({ name: 'serie', serieId });
  }, [navigate]);

  const backFromSerie = aC(() => {
    // Return to whichever view we came from (featured or series index).
    const target = (prevView && prevView.name !== 'serie') ? prevView : { name: 'featured' };
    navigate(target);
  }, [prevView, navigate]);

  const openPost = aC((slug) => {
    navigate({ name: 'post', slug });
  }, [navigate]);

  const backToBlog = aC(() => navigate({ name: 'blog' }), [navigate]);

  const onMenuNav = aC((key) => navigate({ name: key }), [navigate]);

  const toggleLang = aC(() => setLang((l) => (l === 'fr' ? 'en' : 'fr')), []);

  /* Splash d'entrée retiré (décision 24/07) — arrivée directe sur le feed. */

  /* --- Main render -------------------------------------------------- */
  const serie = view.name === 'serie' ? DATA.byId[view.serieId] : null;
  const post = view.name === 'post'
    ? (DATA.BLOG || []).find((p) => p.slug === view.slug)
    : null;

  return (
    <React.Fragment>
      {view.name !== 'serie' && (
        <Header
          menuOpen={menuOpen}
          onToggleMenu={() => setMenuOpen((o) => !o)}
          onWordmark={() => navigate({ name: 'featured' })}
        />
      )}

      <MenuOverlay
        open={menuOpen}
        t={t}
        lang={lang}
        links={DATA.LINKS}
        view={view.name}
        onNav={onMenuNav}
        onToggleLang={toggleLang}
      />

      {view.name === 'featured' && <Featured data={DATA} onOpenSerie={openSerie} />}
      {view.name === 'series' && <SeriesIndex data={DATA} onOpenSerie={openSerie} />}
      {/* Slug inconnu → on retombe sur l'index du journal. */}
      {(view.name === 'blog' || (view.name === 'post' && !post)) && (
        <BlogList data={DATA} t={t} lang={lang} onOpenPost={openPost} />
      )}
      {view.name === 'post' && post && (
        <BlogPost post={post} t={t} lang={lang} onBack={backToBlog} />
      )}
      {view.name === 'info' && <Info t={t} lang={lang} links={DATA.LINKS} />}
      {view.name === 'serie' && serie && (
        <SerieView
          key={serie.id}
          serie={serie}
          t={t}
          onBack={backFromSerie}
          onOpenSerie={openSerie}
        />
      )}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);