// ============================================================
//  APP ROOT — État global, routing simple, persistance
// ============================================================

function App() {
  const [page, setPageRaw] = React.useState(() => localStorage.getItem("ajc_page") || "home");
  const [role, setRoleRaw] = React.useState(() => localStorage.getItem("ajc_role") || "member");
  const [lang, setLangRaw] = React.useState(() => localStorage.getItem("ajc_lang") || "fr");
  const [profileId, setProfileId] = React.useState(null);
  const [oppId, setOppId] = React.useState(null);
  const [openMenu, setOpenMenu] = React.useState(false);

  // Persist
  const setPage = (p) => { setPageRaw(p); setOpenMenu(false); localStorage.setItem("ajc_page", p); window.scrollTo({ top: 0, behavior: "smooth" }); };
  const setRole = (r) => { setRoleRaw(r); localStorage.setItem("ajc_role", r); };
  const setLang = (l) => { setLangRaw(l); localStorage.setItem("ajc_lang", l); document.documentElement.lang = l; };

  const t = AJC.I18N[lang];

  // Filtre membres selon rôle
  const ctx = {
    page, setPage, role, setRole, lang, setLang, t,
    profileId, setProfileId,
    oppId, setOppId,
    openMenu, setOpenMenu,
    openProfile: (id) => { setProfileId(id); setPage("profile"); },
    openOpp: (id) => { setOppId(id); setPage("opp-detail"); },
    members: AJC.MEMBERS,
    pendingMembers: AJC.PENDING_MEMBERS,
    opps: AJC.OPPS,
    countries: AJC.COUNTRIES,
    domains: AJC.DOMAINS
  };

  const renderPage = () => {
    switch (page) {
      case "home":         return <Home/>;
      case "trombi":       return role === "visitor" ? <NoAccess/> : <Trombi/>;
      case "profile":      return <Profile/>;
      case "register":     return <Register/>;
      case "opps":         return <Opportunities/>;
      case "opp-detail":   return <OpportunityDetail/>;
      case "opp-add":      return <OpportunityAdd/>;
      case "dash":         return role === "admin" ? <Dashboard/> : <NoAccess/>;
      case "about":        return <About/>;
      case "login":        return <Login/>;
      case "privacy":      return <Privacy/>;
      case "contact":      return <Contact/>;
      default:             return <Home/>;
    }
  };

  return (
    <AppContext.Provider value={ctx}>
      <Layout>{renderPage()}</Layout>
    </AppContext.Provider>
  );
}

const NoAccess = () => {
  const { t, setPage, role } = useApp();
  return (
    <Section className="py-24">
      <div className="max-w-md mx-auto text-center bg-white rounded-2xl p-10 shadow-card border border-ajc-blue/10">
        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-ajc-gold/20 flex items-center justify-center">
          <Icon name="eyeOff" size={28} className="text-ajc-blue"/>
        </div>
        <h2 className="font-display text-2xl font-semibold text-ajc-blueDk mb-2">Espace réservé aux membres</h2>
        <p className="text-ajc-mute mb-6">
          Cette section est accessible uniquement aux Anciens Juvénistes connectés. Connectez-vous ou rejoignez le trombinoscope.
        </p>
        <div className="flex gap-3 justify-center">
          <Btn variant="primary" icon="user" onClick={() => setPage("login")}>{t.nav.login}</Btn>
          <Btn variant="gold" icon="plus" onClick={() => setPage("register")}>{t.nav.register}</Btn>
        </div>
      </div>
    </Section>
  );
};

window.NoAccess = NoAccess;

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