// app/app.jsx — Composition principale de l'app invité
//
// Architecture :
//  - <GuestProvider> wrappe toute l'app (contexte d'identité)
//  - <AuthGate> bloque l'accès si l'invité n'est pas identifié, et affiche
//    AuthScreen (3 variantes en Tweak : cinematic / sobre / countdown)
//  - Une fois identifié, on entre dans <GuestApp> avec sa TabBar 8 onglets.
//
// Nouvel ordre d'onglets (★ Anecdotes mis en avant juste après le Plan) :
//   home · plan · anec · quiz · bets · carnet · papa · gal

const TAB_ORDER = ["home", "plan", "anec", "quiz", "bets", "carnet", "papa", "gal"];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "authVariant": "cinematic"
}/*EDITMODE-END*/;

function renderTab(tab) {
  switch (tab) {
    case "home":   return <HomePage onNavigate={(t) => window.__guestNav?.(t)} />;
    case "plan":   return <PlanPage />;
    case "anec":   return <AnecdotesPage />;
    case "quiz":   return <QuizPage />;
    case "bets":   return <BetsPage />;
    case "carnet": return <CarnetPage />;
    case "papa":   return <BerealPage />;
    case "gal":    return <GalleryPage />;
    default:       return null;
  }
}

function GuestApp() {
  const [tab, setTab] = React.useState(() => {
    if (typeof window === "undefined") return "home";
    const h = window.location.hash.replace("#", "");
    // backward compat : anciens hashes
    if (h === "anecdotes") return "anec";
    return TAB_ORDER.includes(h) ? h : "home";
  });

  // Transition entre onglets : on garde l'onglet sortant le temps de
  // jouer le slide-out (~400 ms), puis on le retire.
  const [outgoing, setOutgoing] = React.useState(null); // { tab, dir }

  const goTab = React.useCallback((next) => {
    setTab((cur) => {
      if (next === cur) return cur;
      const dir = TAB_ORDER.indexOf(next) > TAB_ORDER.indexOf(cur) ? 1 : -1;
      setOutgoing({ tab: cur, dir });
      return next;
    });
  }, []);

  // Expose pour HomePage (et autres) qui veulent naviguer
  React.useEffect(() => { window.__guestNav = goTab; return () => { delete window.__guestNav; }; }, [goTab]);

  React.useEffect(() => {
    if (!outgoing) return;
    const t = setTimeout(() => setOutgoing(null), 420);
    return () => clearTimeout(t);
  }, [outgoing]);

  React.useEffect(() => { window.location.hash = tab; }, [tab]);

  // Admin
  const [adminOpen, setAdminOpen] = React.useState(() => {
    return typeof window !== "undefined" && window.location.search.includes("admin");
  });

  // dir > 0 : on va vers la droite (onglet suivant), nouveau slide depuis right
  // dir < 0 : on va vers la gauche, nouveau slide depuis left
  const inAnimClass = outgoing ? (outgoing.dir > 0 ? "tab-slide-in-left" : "tab-slide-in-right") : "";
  const outAnimClass = outgoing ? (outgoing.dir > 0 ? "tab-slide-out-left" : "tab-slide-out-right") : "";

  return (
    <>
      <AppTopBanner />
      <main style={{ position: "relative", minHeight: "100vh", overflowX: "hidden", paddingBottom: 80 }}>
        {outgoing && (
          <div key={`out-${outgoing.tab}-${outgoing.dir}`} className={outAnimClass}
            style={{ position: "absolute", inset: 0, willChange: "transform" }}>
            {renderTab(outgoing.tab)}
          </div>
        )}
        <div key={`in-${tab}`} className={inAnimClass}
          style={{ position: "relative", willChange: "transform" }}>
          {renderTab(tab)}
        </div>
      </main>
      <TabBar current={tab} onChange={goTab} />
      {adminOpen && <AdminPanel onClose={() => setAdminOpen(false)} />}
    </>
  );
}

// ─────────────────────────────────────────────────────────
// Racine — GuestProvider > AuthGate > GuestApp + Tweaks
// ─────────────────────────────────────────────────────────
function GuestAppRoot() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <GuestProvider>
      <AuthGate variant={t.authVariant}>
        <GuestApp />
      </AuthGate>

      <TweaksPanel title="Tweaks · App invité">
        <TweakSection label="Écran d'authentification">
          <TweakRadio
            label="Variante"
            value={t.authVariant}
            options={[
              { value: "cinematic", label: "Cinematic" },
              { value: "sobre",     label: "Sobre" },
              { value: "countdown", label: "Countdown" },
            ]}
            onChange={(v) => setTweak("authVariant", v)}
          />
          <div className="twk-row" style={{ gap: 8, flexWrap: "wrap" }}>
            <button className="twk-btn"
              style={{ flex: 1, padding: "9px 12px", border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.05)", color: "#fff", fontSize: 11, cursor: "pointer" }}
              onClick={() => { writeStoredIdentity(null); location.reload(); }}>
              ⇋ Forcer l'écran d'auth
            </button>
          </div>
        </TweakSection>
      </TweaksPanel>
    </GuestProvider>
  );
}

const appRoot = ReactDOM.createRoot(document.getElementById("app-root"));
appRoot.render(<GuestAppRoot />);