/* global React, ReactDOM */
const { useState, useEffect } = React;

// ============================================================
// App root — orchestrates screens
// ============================================================
function Root() {
  const [lang, setLang] = useState("es");
  const [screen, setScreen] = useState("welcome"); // welcome | wizard | editor | deploy | live
  const [liveSkin, setLiveSkin] = useState(null); // tweak override
  const [state, setState] = useState({
    projectType: null,
    storage: null,
    ai: null,
    aiProvider: "openai",
    aiKey: "",
    title: "",
    goal: "",
    desc: "",
    notebookConnected: false,
  });
  const [liveUrl, setLiveUrl] = useState("");

  // Tweak hooks: jump to any screen + override live skin
  useEffect(() => {
    const onGoto = (e) => {
      const target = e.detail;
      if (target === "auto") return;
      if (target === "deploy" || target === "live") {
        // Need a project type to render meaningfully
        setState((s) => ({
          ...s,
          projectType: s.projectType || "landing",
          title: s.title || "Untitled",
          goal: s.goal || "Una idea simple, hecha bien.",
          desc: s.desc || "Un proyecto creado con creation path.",
        }));
        if (target === "live") setLiveUrl(`https://untitled.aimaker.app`);
      }
      setScreen(target);
    };
    const onSkin = (e) => setLiveSkin(e.detail);
    window.addEventListener("__tweak_goto", onGoto);
    window.addEventListener("__tweak_skin", onSkin);
    return () => {
      window.removeEventListener("__tweak_goto", onGoto);
      window.removeEventListener("__tweak_skin", onSkin);
    };
  }, []);

  const effectiveState = liveSkin ? { ...state, projectType: liveSkin } : state;
  const t = I18N[lang];

  return (
    <LangCtx.Provider value={{ t, lang, setLang }}>
      <div className={`app screen-${screen}`}>
        <TopBar onHome={() => setScreen("welcome")} />
        <div className="app-stage">
          {screen === "welcome" && <Welcome onStart={() => setScreen("wizard")} />}
          {screen === "wizard" && (
            <Wizard
              state={state}
              setState={setState}
              onBack={() => setScreen("welcome")}
              onDone={() => setScreen("editor")}
            />
          )}
          {screen === "editor" && (
            <Editor
              state={state}
              onBack={() => setScreen("wizard")}
              onDeploy={() => setScreen("deploy")}
            />
          )}
          {screen === "deploy" && (
            <DeployModal
              state={state}
              onClose={() => setScreen("editor")}
              onLive={(url) => { setLiveUrl(url); setScreen("live"); }}
            />
          )}
          {screen === "live" && (
            <LiveApp
              state={effectiveState}
              url={liveUrl || "https://untitled.aimaker.app"}
              onBack={() => setScreen("editor")}
              onRedeploy={() => setScreen("deploy")}
            />
          )}
        </div>
      </div>
    </LangCtx.Provider>
  );
}

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