// app.jsx — Main shell, router, tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#0F5132",
  "accentColor": "#C9A227",
  "density": "regular",
  "cardStyle": "shadow",
  "heroVariant": "split",
  "dark": false,
  "lang": "fr",
  "fontSize": 100,
  "contrast": false,
  "alertDismissed": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(() => {
    const hash = window.location.hash.replace("#", "");
    return hash || "accueil";
  });

  // Apply tweaks to root
  useEffect(() => {
    document.documentElement.style.setProperty("--c-primary", t.primaryColor);
    document.documentElement.style.setProperty("--c-accent", t.accentColor);
    const densityVal = { compact: 0.7, regular: 1, comfy: 1.25 }[t.density] || 1;
    document.documentElement.style.setProperty("--density", densityVal);
    document.body.setAttribute("data-cards", t.cardStyle);
    document.body.setAttribute("data-dark", t.dark);
  }, [t]);

  const navigate = (newRoute) => {
    setRoute(newRoute);
    window.location.hash = newRoute;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  useEffect(() => {
    const onHash = () => setRoute(window.location.hash.replace("#", "") || "accueil");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const PAGES = {
    accueil:        <Home navigate={navigate} tweaks={t} />,
    ordre:          <Ordre navigate={navigate} />,
    actualites:     <Actualites navigate={navigate} />,
    annuaire:       <Annuaire navigate={navigate} />,
    services:       <Services navigate={navigate} />,
    reglementation: <Reglementation />,
    formations:     <Formations />,
    faq:            <FAQ />,
    signaler:       <Signaler />,
    verifier:       <Verifier />,
    connexion:      <EspaceMembre navigate={navigate} />,
    membre:         <EspaceMembre navigate={navigate} />,
    admin:          <EspaceMembre navigate={navigate} />,
    inscription:    <Inscription navigate={navigate} />,
    contact:        <Contact />,
    garde:          <Garde navigate={navigate} />,
    alertes:        <Alertes />,
    chiffres:       <Chiffres />,
    guides:         <Guides />,
    portraits:      <Portraits navigate={navigate} />,
    presse:         <Presse />,
    bilan:          <Bilan />,
    carrieres:      <Carrieres />,
    forum:          <Forum />,
    bureau:         <Bureau navigate={navigate} />,
    histoire:       <Histoire navigate={navigate} />,
    proposer:       <ProposerFormation navigate={navigate} />,
  };

  const Page = PAGES[route] || PAGES.accueil;
  const showHeaderFooter = route !== "connexion" && route !== "membre" && route !== "admin";

  return (
    <>
      {showHeaderFooter && <AlertBanner navigate={navigate} dismissed={t.alertDismissed} onDismiss={() => setTweak("alertDismissed", true)} />}
      {showHeaderFooter && <TopBar route={route} navigate={navigate} tweaks={t} setTweak={setTweak} />}
      <main key={route}>{Page}</main>
      {showHeaderFooter && <Footer navigate={navigate} />}
      <Chatbot />
      <A11yTools tweaks={t} setTweak={setTweak} />

      <TweaksPanel>
        <TweakSection label="Identité" />
        <TweakColor
          label="Vert principal"
          value={t.primaryColor}
          options={["#0F5132", "#1B7A3E", "#0A6B5B", "#0A3D26", "#2E7D32"]}
          onChange={(v) => setTweak("primaryColor", v)}
        />
        <TweakColor
          label="Accent or"
          value={t.accentColor}
          options={["#C9A227", "#D4AF37", "#E0B33A", "#B58A1F", "#F4C430"]}
          onChange={(v) => setTweak("accentColor", v)}
        />

        <TweakSection label="Mise en page" />
        <TweakRadio
          label="Densité"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSelect
          label="Style des cartes"
          value={t.cardStyle}
          options={[
            { value: "shadow",   label: "Ombrées" },
            { value: "flat",     label: "Plates" },
            { value: "bordered", label: "Bordées" },
          ]}
          onChange={(v) => setTweak("cardStyle", v)}
        />

        <TweakSection label="Thème" />
        <TweakToggle
          label="Mode sombre"
          value={t.dark}
          onChange={(v) => setTweak("dark", v)}
        />

        <TweakSection label="Navigation rapide" />
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {[
            { r: "accueil", l: "Accueil" },
            { r: "ordre", l: "L'Ordre" },
            { r: "actualites", l: "Actualités" },
            { r: "annuaire", l: "Annuaire" },
            { r: "services", l: "Services" },
            { r: "reglementation", l: "  ↳ Réglementation" },
            { r: "formations", l: "  ↳ Formations" },
            { r: "faq", l: "  ↳ FAQ" },
            { r: "signaler", l: "  ↳ Signaler" },
            { r: "verifier", l: "Vérifier" },
            { r: "garde", l: "🆕 Pharmacies de garde" },
            { r: "alertes", l: "🆕 Alertes sanitaires" },
            { r: "chiffres", l: "🆕 L'Ordre en chiffres" },
            { r: "guides", l: "🆕 Guides santé" },
            { r: "portraits", l: "🆕 Portraits & Podcasts" },
            { r: "presse", l: "🆕 Espace presse" },
            { r: "bilan", l: "🆕 Bilan annuel" },
            { r: "carrieres", l: "🆕 Carrières & stages" },
            { r: "forum", l: "🆕 Forum confraternel" },
            { r: "bureau", l: "🆕 Bureau & Conseil" },
            { r: "histoire", l: "🆕 Historique" },
            { r: "proposer", l: "🆕 Proposer une formation" },
            { r: "inscription", l: "S'inscrire à l'Ordre" },
            { r: "connexion", l: "Connexion" },
            { r: "membre", l: "Espace membre (auth)" },
            { r: "contact", l: "Contact" },
          ].map((p) => (
            <button
              key={p.r}
              onClick={() => navigate(p.r)}
              style={{
                textAlign: "left",
                padding: "6px 10px",
                background: route === p.r ? "rgba(15,81,50,0.1)" : "transparent",
                color: route === p.r ? "var(--c-primary)" : "rgba(41,38,27,0.7)",
                border: 0,
                borderRadius: 6,
                fontFamily: "inherit",
                fontSize: 11.5,
                fontWeight: route === p.r ? 600 : 400,
                cursor: "pointer",
                whiteSpace: "pre",
              }}
            >
              {p.l}
            </button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

function AppWithLoader() {
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    (window._dataReady || Promise.resolve()).finally(() => setReady(true));
  }, []);

  if (!ready) return (
    <div style={{
      minHeight: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", gap: 16,
      background: "#f9fafb",
    }}>
      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
        <circle cx="24" cy="24" r="22" fill="var(--c-primary, #0F5132)" />
        <path d="M14 28 Q14 36 24 36 Q34 36 34 28 L34 22 L14 22 Z" fill="#fff" opacity="0.95" />
        <rect x="22" y="10" width="4" height="14" rx="2" fill="#C9A227" transform="rotate(20 24 17)" />
      </svg>
      <div style={{ width: 32, height: 32, border: "3px solid #e5e7eb", borderTopColor: "#0F5132", borderRadius: "50%", animation: "spin 0.8s linear infinite" }} />
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      <p style={{ color: "#6b7280", fontSize: 14, fontFamily: "Manrope, sans-serif" }}>Chargement…</p>
    </div>
  );

  return <App />;
}

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