// app.jsx — coquille, navigation, persistance, Tweaks. Montage final.
const { useState: useStateA, useEffect: useEffectA } = React;

const WIZARD = ["company", "reference", "upload", "run", "confirm", "result"];
const VARIANT_MAP = { "Formulaire groupé": "grouped", "Conversationnel": "conversational", "File de cartes": "queue" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "questionsVariant": "Formulaire groupé",
  "accent": "#c8a24a",
  "density": "regular"
}/*EDITMODE-END*/;

const PERSIST_KEY = "grant4me.nav.v2";

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Le dossier courant vient du moteur. Sans backend, il reste null et tous
  // les écrans basculent en démonstration — le prototype reste navigable.
  const [projects] = useG4M(() => G4M.projects(), [], []);
  const [projetCree, setProjetCree] = useStateA(null);
  const project = projetCree || (projects && projects[0]) || null;
  // BUG DE PREMIER UTILISATEUR (vu au test bêta 2026-08-07) : un compte neuf
  // n'a AUCUN dossier, et aucun écran n'en créait — la fiche ne se
  // persistait pas et le téléversement restait bloqué. « Nouvelle demande »
  // crée donc le dossier s'il n'existe pas.
  const ensureProject = async () => {
    if (project) return project;
    const p = await G4M.createProject("Ma demande", null);
    setProjetCree(p);
    return p;
  };
  const [nav, setNav] = useStateA(() => {
    try { return { screen: "login", refStage: "intro", ...JSON.parse(localStorage.getItem(PERSIST_KEY) || "{}") }; }
    catch (e) { return { screen: "login", refStage: "intro" }; }
  });
  const [textScale, setTextScale] = useStateA(() => parseFloat(localStorage.getItem("grant4me.scale") || "1"));

  useEffectA(() => { try { localStorage.setItem(PERSIST_KEY, JSON.stringify(nav)); } catch (e) {} }, [nav]);
  useEffectA(() => {
    document.documentElement.style.setProperty("--scale", textScale);
    try { localStorage.setItem("grant4me.scale", String(textScale)); } catch (e) {}
  }, [textScale]);

  // accent dérivé d'une seule couleur
  useEffectA(() => {
    const r = document.documentElement.style; const c = t.accent;
    r.setProperty("--accent", c);
    r.setProperty("--accent-2", `color-mix(in oklab, ${c}, #2a1d05 30%)`);
    r.setProperty("--accent-bg", `color-mix(in oklab, ${c} 15%, var(--paper))`);
    r.setProperty("--accent-line", `color-mix(in oklab, ${c} 42%, var(--paper))`);
  }, [t.accent]);

  // densité → espacements
  useEffectA(() => {
    const g = t.density === "compact" ? "16px" : t.density === "comfy" ? "40px" : "clamp(20px,2.4vw,34px)";
    document.documentElement.style.setProperty("--gap", g);
  }, [t.density]);

  const screen = nav.screen;
  const go = (screen, extra = {}) => setNav((n) => ({ ...n, screen, ...extra }));
  const variant = VARIANT_MAP[t.questionsVariant] || "grouped";

  const isWizard = WIZARD.includes(screen);
  const wizIdx = WIZARD.indexOf(screen);

  // navigation wizard
  const nextWiz = () => { const i = WIZARD.indexOf(screen); if (i < WIZARD.length - 1) go(WIZARD[i + 1]); };
  const prevWiz = () => { const i = WIZARD.indexOf(screen); if (i > 0) go(WIZARD[i - 1]); };

  // Le vocabulaire du domaine actif (« demande de subvention » / « déclaration »)
  // est chargé ici, une fois : tous les écrans l'interpolent ensuite via t().
  useDomainLexicon(project && project.id, screen !== "login");

  // Aide (bouton « i ») et tutoriel. Le tutoriel se propose UNE fois, au
  // premier tableau de bord vide — ensuite il vit dans l'aide.
  const [help, setHelp] = useStateA(false);
  const [tuto, setTuto] = useStateA(false);
  const [billing, setBilling] = useStateA(false);

  return (
    <div className="app">
      <TopBar screen={screen} onHome={() => go("dashboard")} textScale={textScale} setTextScale={setTextScale}
        companyName={project && project.companyName} onHelp={() => setHelp(true)}
        onBilling={() => setBilling(true)}
        onLogout={async () => {
          // Le jeton est RÉVOQUÉ côté serveur (pas seulement oublié ici) :
          // un jeton copié avant la déconnexion ne doit plus rien ouvrir.
          try { await G4M.logout(); } catch (e) {}
          try { localStorage.removeItem(PERSIST_KEY); } catch (e) {}
          setNav({ screen: "login", refStage: "intro" });
        }} />
      <HelpPanel open={help} onClose={() => setHelp(false)} onStartTutorial={() => setTuto(true)} />
      <Tutorial open={tuto} onClose={() => setTuto(false)} />
      <BillingModal open={billing} onClose={() => setBilling(false)} />
      {screen === "login" ? (
        <LoginScreen onLogin={() => go("dashboard")} />
      ) : (
        <div className="body">
          {isWizard && <StepRail current={wizIdx} go={go} refStage={nav.refStage} />}
          {screen === "dashboard" && <DashboardScreen
            onNew={async () => { try { await ensureProject(); } catch (e) {} go("company"); }}
            onOpen={() => go("company")}
            onFirstVisit={() => { if (tutorialPending()) setTuto(true); }} />}
          {screen === "company" && <CompanyScreen onNext={nextWiz} />}
          {screen === "upload" && (
            <UploadScreen onNext={nextWiz} onBack={prevWiz}
              projectId={project && project.id}
              onRunStarted={(id) => setNav((n) => ({ ...n, runId: id, _runKey: (n._runKey || 0) + 1 }))} />
          )}
          {screen === "reference" && (
            <ReferenceScreen onNext={nextWiz} onBack={prevWiz} project={project}
              stage={nav.refStage} setStage={(s) => setNav((n) => ({ ...n, refStage: s }))} />
          )}
          {screen === "run" && <RunScreen key={nav._runKey || 0} runId={nav.runId} onNext={() => go("confirm")} onBack={prevWiz} />}
          {screen === "confirm" && <ConfirmScreen variant={variant} runId={nav.runId} onNext={() => go("result")} onBack={prevWiz} />}
          {screen === "result" && <ResultScreen runId={nav.runId} onBack={prevWiz} onHome={() => go("dashboard")} />}
        </div>
      )}

      <TweaksPanel>
        <TweakSection label="Écran « À confirmer »" />
        <TweakSelect label="Présentation des questions" value={t.questionsVariant}
          options={Object.keys(VARIANT_MAP)} onChange={(v) => setTweak("questionsVariant", v)} />
        <p style={{ fontSize: ".76rem", color: "#9aa", lineHeight: 1.4, margin: "2px 2px 4px" }}>
          Comment l'utilisateur valide les champs proposés par l'assistant.
        </p>
        <TweakSection label="Apparence" />
        <TweakColor label="Couleur d'accent" value={t.accent}
          options={["#c8a24a", "#4a7a5e", "#a8623f", "#3a6b8f"]} onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Densité" value={t.density}
          options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

/* ---------- Top bar ---------- */
function TopBar({ screen, onHome, textScale, setTextScale, companyName, onHelp, onBilling, onLogout }) {
  const showCtx = screen !== "login";
  const { t } = useLang();
  // La barre est montée AVANT la connexion : interroger `me` une seule fois
  // au montage renvoyait toujours vide (aucun jeton encore). On redemande
  // quand le jeton apparaît ou change — sinon l'avatar reste anonyme et le
  // nom d'entreprise ne s'affiche jamais.
  const [session] = useG4M(() => G4M.me(), null, [showCtx, G4M.token]);
  const [menu, setMenu] = useStateA(false);
  // Fermer au clic ailleurs et à Échap : un menu qu'on ne peut pas refermer
  // est plus agaçant que pas de menu du tout.
  useEffectA(() => {
    if (!menu) return;
    const fermer = () => setMenu(false);
    const parEchap = (e) => e.key === "Escape" && setMenu(false);
    window.addEventListener("click", fermer);
    window.addEventListener("keydown", parEchap);
    return () => { window.removeEventListener("click", fermer); window.removeEventListener("keydown", parEchap); };
  }, [menu]);
  const nom = companyName || (session && session.companyName) || "";
  // Initiales de la personne connectée. « GL » était celles de la dirigeante
  // fictive du prototype — afficher les initiales de quelqu'un d'autre en haut
  // de chaque écran, c'est le genre de détail qu'on finit par ne plus voir.
  const initiales = ((session && (session.fullName || session.email)) || "")
    .split(/[\s.@_-]+/).filter(Boolean).slice(0, 2).map((m) => m[0].toUpperCase()).join("");
  return (
    <header className="topbar">
      <span style={{ cursor: "pointer" }} onClick={showCtx ? onHome : undefined}><Logo /></span>
      {showCtx && nom && (
        <span className="topbar-ctx"><span className="dot" /> {nom}</span>
      )}
      <span className="topbar-spacer" />
      {!showCtx && (
        <div className="topbar-tools"><LangSwitch /></div>
      )}
      {showCtx && (
        <div className="topbar-tools">
          <LangSwitch />
          <div className="txt-size" role="group" aria-label={t("Taille du texte")}>
            <span className="lab">{t("Texte")}</span>
            <button className={textScale <= 1 ? "on" : ""} aria-label={t("Texte normal")} onClick={() => setTextScale(1)} style={{ fontSize: ".8rem" }}>A</button>
            <button className={textScale > 1 && textScale < 1.25 ? "on" : ""} aria-label={t("Texte plus grand")} onClick={() => setTextScale(1.15)} style={{ fontSize: ".95rem" }}>A</button>
            <button className={textScale >= 1.25 ? "on" : ""} aria-label={t("Texte très grand")} onClick={() => setTextScale(1.3)} style={{ fontSize: "1.1rem" }}>A</button>
          </div>
          {/* Le « i » n'était branché sur rien — un bouton mort au sommet de
              chaque écran. Il ouvre l'aide : FAQ + tutoriel. */}
          <button className="iconbtn" aria-label={t("Aide")} onClick={onHelp}><Icon name="info" size={20} /></button>
          <span className="acct-wrap" onClick={(e) => e.stopPropagation()}>
            <button className="avatar" aria-haspopup="menu" aria-expanded={menu}
              aria-label={t("Votre compte")} onClick={() => setMenu((m) => !m)}>
              {initiales || <Icon name="user" size={18} />}
            </button>
            {menu && (
              <span className="acct-menu" role="menu">
                {session && (session.fullName || session.email) && <span className="acct-id">
                  <b>{session.fullName || session.email}</b>
                  {session.email && <span className="muted">{session.email}</span>}
                  {session.role === "admin" && <span className="pill pill-gold pill-sm">{t("Administrateur")}</span>}
                </span>}
                <button role="menuitem" onClick={() => { setMenu(false); onHome(); }}>
                  <Icon name="building" size={16} /> {t("Mon profil d'entreprise")}
                </button>
                <button role="menuitem" onClick={() => { setMenu(false); onBilling && onBilling(); }}>
                  <Icon name="shield" size={16} /> {t("Facturation")}
                </button>
                <button role="menuitem" onClick={() => { setMenu(false); onHelp(); }}>
                  <Icon name="info" size={16} /> {t("Aide")}
                </button>
                <button role="menuitem" className="acct-out" onClick={() => { setMenu(false); onLogout(); }}>
                  <Icon name="lock" size={16} /> {t("Déconnexion")}
                </button>
              </span>
            )}
          </span>
        </div>
      )}
    </header>
  );
}

/* ---------- Step rail (orientation) ---------- */
function StepRail({ current, go, refStage }) {
  const { t } = useLang();
  return (
    <nav className="rail" aria-label={t("Étapes de votre {demande}")}>
      <div className="rail-kick">{t("VOTRE {demande}")}</div>
      <ol className="steps">
        {JOURNEY.map((s, i) => {
          const state = i < current ? "done" : i === current ? "current" : "todo";
          const clickable = i <= current;
          return (
            <li key={s.id} className={"step " + state + (clickable ? " clickable" : "")}
              onClick={clickable ? () => go(s.id, s.id === "reference" ? { refStage: i < current ? "review" : refStage } : {}) : undefined}
              role={clickable ? "button" : undefined} tabIndex={clickable ? 0 : undefined}
              onKeyDown={clickable ? (e) => e.key === "Enter" && go(s.id) : undefined}>
              <span className="step-line" />
              <span className="step-dot">{state === "done" ? <Icon name="check" size={15} strokeWidth={2.6} /> : i + 1}</span>
              <span className="step-txt">
                <span className="step-lab">{t(s.label)}</span>
                <span className="step-sub">{t(s.sub)}</span>
              </span>
            </li>
          );
        })}
      </ol>
      <div className="rail-help">
        <h4><Icon name="shield" size={16} /> {t("On vous accompagne")}</h4>
        <p>{t("Bloqué sur une information ? Chaque champ a un « ? » qui vous dit ")}
          <b style={{ color: "var(--ink)" }}>{t("où aller la chercher")}</b>{t(", en mots simples.")}</p>
      </div>
    </nav>
  );
}

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