// App shell — routes between pages, holds role + modal state.

function LoginScreen({ onLogin }) {
  const { t } = useApp();
  const roles = [
    { id: "directeur",  label: t("login_dir_label"),    desc: t("login_dir_desc"),    ico: Icons.School  },
    { id: "professeur", label: t("login_prof_label"),   desc: t("login_prof_desc"),   ico: Icons.Classes },
    { id: "parent",     label: t("login_parent_label"), desc: t("login_parent_desc"), ico: Icons.Team    },
  ];

  return (
    <div style={{
      minHeight: "100vh", background: "var(--bg)",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      gap: 48, padding: 40,
    }}>
      <div style={{textAlign: "center"}}>
        <div style={{display: "flex", alignItems: "center", justifyContent: "center", gap: 14, marginBottom: 14}}>
          <ScoliaMark size={48}/>
          <span style={{fontSize: 40, fontWeight: 800, letterSpacing: "-0.03em", color: "var(--ink)"}}>scolia</span>
        </div>
        <p style={{color: "var(--ink-4)", fontSize: 17, margin: 0}}>{t("login_subtitle")}</p>
      </div>

      <div style={{display: "flex", gap: 24, flexWrap: "wrap", justifyContent: "center"}}>
        {roles.map(r => (
          <button key={r.id} onClick={() => onLogin(r.id)}
                  className="card card-pad"
                  style={{
                    width: 270, textAlign: "left", cursor: "pointer",
                    transition: "border-color .15s, transform .15s, box-shadow .15s",
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.borderColor = "var(--brand)";
                    e.currentTarget.style.transform = "translateY(-4px)";
                    e.currentTarget.style.boxShadow = "var(--shadow-pop)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = "";
                    e.currentTarget.style.transform = "";
                    e.currentTarget.style.boxShadow = "";
                  }}>
            <div style={{
              width: 52, height: 52, borderRadius: 16,
              background: "var(--brand-soft)", display: "grid", placeItems: "center",
              color: "var(--brand-ink)", marginBottom: 18,
            }}>
              <r.ico size={24}/>
            </div>
            <div style={{fontWeight: 800, fontSize: 16.5, color: "var(--ink)", marginBottom: 8}}>
              {r.label}
            </div>
            <div style={{fontSize: 13, color: "var(--ink-4)", lineHeight: 1.6, marginBottom: 22}}>
              {r.desc}
            </div>
            <div style={{display: "flex", justifyContent: "flex-end"}}>
              <span className="chip brand" style={{display: "flex", alignItems: "center", gap: 4, padding: "6px 12px"}}>
                {t("login_continue")} <Icons.ChevR size={12}/>
              </span>
            </div>
          </button>
        ))}
      </div>

      <div className="meta">{t("login_footer")}</div>
    </div>
  );
}

function App() {
  const [role, setRole] = React.useState(null);
  const [page, setPage] = React.useState("pilotage");
  const [classeId, setClasseId] = React.useState("ce1");
  const [annonceOpen, setAnnonceOpen] = React.useState(false);

  const handleLogin = (r) => {
    setRole(r);
    if (r === "parent")          setPage("child");
    else if (r === "professeur") setPage("classes");
    else                         setPage("pilotage");
  };

  const openClass = (id) => { setClasseId(id); setPage("classe"); };

  return (
    <AppProvider>
      {!role ? (
        <LoginScreen onLogin={handleLogin}/>
      ) : (
        <div className="app" data-screen-label={"App · " + page}>
          <Sidebar
            page={page === "classe" ? "classes" : page}
            role={role}
            onNav={setPage}
            onLogout={() => setRole(null)}
          />
          <main className="main" data-screen-label={"Page · " + page}>
            {page === "pilotage"      && <Pilotage onOpenAnnonce={() => setPage("annonces")} onOpenClass={openClass} onNav={setPage}/>}
            {page === "classes"       && <Classes onOpenClass={openClass}/>}
            {page === "classe"        && <ClasseDetail classeId={classeId} role={role} onBack={() => setPage("classes")}/>}
            {page === "equipe"        && <Equipe onOpenAnnonce={() => setPage("annonces")} onNav={setPage}/>}
            {page === "ecole"         && <Ecole/>}
            {page === "conversations" && <Conversations role={role}/>}
            {page === "inscriptions"  && <Inscriptions/>}
            {page === "agenda"        && <Agenda role={role}/>}
            {page === "parametres"    && <Parametres/>}
            {page === "annonces"      && <AnnoncesPage onNewAnnonce={() => setAnnonceOpen(true)}/>}
            {page === "child"         && <ParentChildView/>}
          </main>
          {annonceOpen && <AnnonceModal onClose={() => setAnnonceOpen(false)}/>}
        </div>
      )}
    </AppProvider>
  );
}

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