// Main App component + mount.
// PRODUCTION-READY: openProfile en el contexto, ProfileModal montable.
function App() {
  React.useMemo(() => {
    try {
      window.Seed.run();
      window.SubscriptionEngine.checkDue();
      if (window.Notif) window.Notif.init();
    } catch (err) {
      console.error("[boot] Error en seed/engine/notif:", err);
    }
  }, []);

  const initialView = (location.hash || "").replace("#", "") || "today";
  const params = new URLSearchParams(location.search);
  const settings = window.Storage.get("settings") || {};
  const initialLang = params.get("lang") === "es" ? "es" : (settings.lang || "es");
  const initialOnboarding = params.get("onboarding") === "1" || !settings.onboardingSeen;
  const initialTheme = settings.theme || "light";
  const initialWeekly = window.WeeklyReport && window.WeeklyReport.shouldShow();

  const [view, setView] = React.useState(initialView);
  const [lang, setLang] = React.useState(initialLang);
  const [theme, setTheme] = React.useState(initialTheme);
  const [onboardingOpen, setOnboardingOpen] = React.useState(initialOnboarding);
  const [settingsOpen, setSettingsOpen] = React.useState(false);
  const [profileOpen, setProfileOpen] = React.useState(false);
  const [weeklyOpen, setWeeklyOpen] = React.useState(initialWeekly);

  React.useEffect(() => { location.hash = view; }, [view]);
  React.useEffect(() => { document.documentElement.dataset.theme = theme; }, [theme]);
  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  React.useEffect(() => {
    const s = window.Storage.get("settings") || {};
    window.Storage.set("settings", Object.assign({}, s, { lang, theme }));
  }, [lang, theme]);

  function closeOnboarding() {
    const s = window.Storage.get("settings") || {};
    window.Storage.set("settings", Object.assign({}, s, { onboardingSeen: true }));
    setOnboardingOpen(false);
  }

  function closeWeekly() {
    if (window.WeeklyReport) window.WeeklyReport.markShown();
    setWeeklyOpen(false);
  }

  const Views = {
    today:    window.ViewToday,
    finance:  window.ViewFinance,
    habits:   window.ViewHabits,
    goals:    window.ViewGoals,
    calendar: window.ViewCalendar,
    workouts: window.ViewWorkouts,
    progress: window.ViewProgress,
  };
  const ActiveView = Views[view] || (() => null);

  const ctx = {
    lang, setLang,
    theme, setTheme,
    view, setView,
    openOnboarding: () => setOnboardingOpen(true),
    openSettings: () => setSettingsOpen(true),
    openProfile: () => setProfileOpen(true),
  };

  return (
    <window.AppCtx.Provider value={ctx}>
      <div className="app" data-screen-label={"01 " + view}>
        <window.Sidebar view={view} setView={setView} />
        <main style={{ minWidth: 0 }}>
          <window.Topbar view={view} />
          <ActiveView />
        </main>
      </div>
      {onboardingOpen && window.Onboarding && (
        <window.Onboarding onClose={closeOnboarding} />
      )}
      {settingsOpen && window.SettingsPanel && (
        <window.SettingsPanel onClose={() => setSettingsOpen(false)} />
      )}
      {profileOpen && window.ProfileModal && (
        <window.ProfileModal onClose={() => setProfileOpen(false)} />
      )}
      {weeklyOpen && window.WeeklyReportModal && !onboardingOpen && (
        <window.WeeklyReportModal onClose={closeWeekly} />
      )}
      {window.ConfettiHost && <window.ConfettiHost />}
    </window.AppCtx.Provider>
  );
}

window.AppCtx = window.AppCtx || React.createContext(null);
if (window.useApp === undefined) {
  window.useApp = () => React.useContext(window.AppCtx);
}

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