/* SportK — App principal */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const ACCENT_PRESETS = {
  lime: { accent: "oklch(0.78 0.17 142)", deep: "oklch(0.62 0.16 145)", soft: "oklch(0.94 0.07 140)", ink: "oklch(0.28 0.08 150)", swatch: "#7ee37a" },
  emerald: { accent: "oklch(0.72 0.14 162)", deep: "oklch(0.55 0.13 164)", soft: "oklch(0.93 0.06 160)", ink: "oklch(0.26 0.07 165)", swatch: "#34d39a" },
  forest: { accent: "oklch(0.65 0.13 148)", deep: "oklch(0.50 0.12 150)", soft: "oklch(0.92 0.05 148)", ink: "oklch(0.24 0.06 150)", swatch: "#4fa86b" },
  mint: { accent: "oklch(0.83 0.12 158)", deep: "oklch(0.65 0.13 160)", soft: "oklch(0.95 0.05 158)", ink: "oklch(0.30 0.07 160)", swatch: "#9bedc5" },
  electric: { accent: "oklch(0.85 0.20 138)", deep: "oklch(0.68 0.18 140)", soft: "oklch(0.94 0.09 138)", ink: "oklch(0.28 0.10 140)", swatch: "#a8f04d" },
};

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "lime"
}/*EDITMODE-END*/;

function App() {
  const store = useStore();
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const [route, setRoute] = useStateApp({ name: "home", params: {} });

  // Aplica tema
  useEffectApp(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    const preset = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS.lime;
    const root = document.documentElement;
    root.style.setProperty("--accent", preset.accent);
    root.style.setProperty("--accent-deep", preset.deep);
    root.style.setProperty("--accent-soft", preset.soft);
    root.style.setProperty("--accent-ink", preset.ink);
  }, [tweaks.theme, tweaks.accent]);

  // Aplica idioma
  useEffectApp(() => {
    if (window.setLocale && store.state.profile.locale) {
      window.setLocale(store.state.profile.locale);
    }
  }, [store.state.profile.locale]);

  const navigate = (name, params = {}) => {
    setRoute({ name, params });
    // Scroll to top within the screen
    requestAnimationFrame(() => {
      const el = document.querySelector(".screen");
      if (el) el.scrollTop = 0;
    });
  };

  const openTweaks = () => {
    window.parent.postMessage({ type: "__activate_edit_mode" }, "*");
    window.dispatchEvent(new MessageEvent("message", { data: { type: "__activate_edit_mode" } }));
  };

  const needsOnboarding = !store.state.profile.onboarded;
  const showBottomNav = !["active", "create", "tests"].includes(route.name) && !needsOnboarding;

  let screen;
  if (needsOnboarding) {
    screen = <OnboardingScreen store={store} />;
  } else
  switch (route.name) {
    case "home": screen = <HomeScreen store={store} navigate={navigate} />; break;
    case "catalog": screen = <CatalogScreen store={store} navigate={navigate} />; break;
    case "detail": screen = <DetailScreen store={store} navigate={navigate} params={route.params} />; break;
    case "active": screen = <ActiveScreen store={store} navigate={navigate} params={route.params} />; break;
    case "create": screen = <CreateRoutineScreen store={store} navigate={navigate} />; break;
    case "stats": screen = <StatsScreen store={store} navigate={navigate} />; break;
    case "tests": screen = <TestsScreen store={store} navigate={navigate} />; break;
    case "profile": screen = <ProfileScreen store={store} navigate={navigate} openTweaks={openTweaks} />; break;
    default: screen = <HomeScreen store={store} navigate={navigate} />;
  }

  return (
    <div className="app-shell" key={store.state.profile.locale || "es"}>
      <div className="phone">
        <div className="status-bar">
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <Icon.Logo width={18} height={18} style={{ color: "var(--accent-deep)" }} />
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "-0.01em" }}>SportK</span>
          </div>
        </div>

        <div className="screen" key={route.name}>
          {screen}
        </div>

        {showBottomNav && (
          <nav className="bottom-nav">
            <button className={route.name === "home" ? "active" : ""} onClick={() => navigate("home")}>
              <Icon.Home width={22} height={22} /> {(window.t && window.t("nav.home")) || "Inicio"}
            </button>
            <button className={route.name === "catalog" ? "active" : ""} onClick={() => navigate("catalog")}>
              <Icon.List width={22} height={22} /> {(window.t && window.t("nav.routines")) || "Rutinas"}
            </button>
            <button className={route.name === "stats" ? "active" : ""} onClick={() => navigate("stats")}>
              <Icon.Chart width={22} height={22} /> {(window.t && window.t("nav.progress")) || "Progreso"}
            </button>
            <button className={route.name === "profile" ? "active" : ""} onClick={() => navigate("profile")}>
              <Icon.User width={22} height={22} /> {(window.t && window.t("nav.profile")) || "Perfil"}
            </button>
          </nav>
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Apariencia">
          <TweakRadio
            label="Tema"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[{ value: "light", label: "Claro" }, { value: "dark", label: "Oscuro" }]}
          />
        </TweakSection>
        <TweakSection title="Color de acento">
          <div className="tweak-color-grid">
            {Object.entries(ACCENT_PRESETS).map(([k, p]) => (
              <button
                key={k}
                onClick={() => setTweak("accent", k)}
                className={tweaks.accent === k ? "active" : ""}
                style={{ background: p.swatch }}
                title={k}
                aria-label={k}
              />
            ))}
          </div>
          <div style={{ marginTop: 8, fontSize: 12, color: "#888", textTransform: "capitalize" }}>{tweaks.accent}</div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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