import { BannerStack } from "./BannerStack";
import { LegacyHeroSection } from "./legacy-app/LegacyHeroSection";
import { LegacyMainPanel } from "./legacy-app/LegacyMainPanel";
import { LegacySidebar } from "./legacy-app/LegacySidebar";
import { createLegacyHeroModel } from "./legacy-app/legacyHeroModel";
import { createLegacyMainPanelModel } from "./legacy-app/legacyMainPanelModel";
import { createLegacySidebarModel } from "./legacy-app/legacySidebarModel";
import { useLegacyLifeSession } from "../hooks/useLegacyLifeSession";
import { useLegacyAppView } from "../hooks/useLegacyAppView";
import { useThemePreference } from "../hooks/useThemePreference";

export function LegacyLifeApp() {
  const session = useLegacyLifeSession();
  const { theme, toggleTheme } = useThemePreference();
  const hasMetaUnlocked = (session.totals?.times ?? 0) > 0;
  const { view, visibleViews, openView, handleRemake } = useLegacyAppView({
    hasMetaUnlocked,
    session,
  });
  const heroModel = createLegacyHeroModel(session, theme, view);
  const mainPanelModel = createLegacyMainPanelModel(session, handleRemake);
  const sidebarModel = createLegacySidebarModel(session);

  return (
    <div className="mode-shell">
      <BannerStack
        banners={session.banners}
        onDismiss={session.dismissBanner}
      />
      <LegacyHeroSection model={heroModel} onToggleTheme={toggleTheme} />

      <section className="legacy-grid">
        <LegacyMainPanel
          hasMetaUnlocked={hasMetaUnlocked}
          model={mainPanelModel}
          onOpenView={openView}
          view={view}
          visibleViews={visibleViews}
        />
        <LegacySidebar session={sidebarModel} />
      </section>
    </div>
  );
}
