"use client";

import { useState } from "react";
import { HomeTutorialOverlay } from "@/components/home-tutorial-overlay";
import { HomeViewportShell } from "@/components/home-viewport-shell";
import { MandatoryOnboardingGuard } from "@/components/mandatory-onboarding-guard";
import { UserSidebar } from "@/components/user-sidebar";
import { getDemoProgressOverview, useDemoBrowserState } from "@/lib/demo-session-store";
import type { DemoAppConfig, ScenarioCatalogItem } from "@/lib/types";

type HomePageShellProps = {
  appConfig: DemoAppConfig;
  scenarios: ScenarioCatalogItem[];
};

export function HomePageShell({ appConfig, scenarios }: HomePageShellProps) {
  const browserState = useDemoBrowserState();
  const progress = getDemoProgressOverview(browserState);
  const [viewportMode, setViewportMode] = useState<"scenario" | "coach">(
    "scenario",
  );
  const shouldShowTutorial =
    browserState.onboarding.onboardingCompleted &&
    !browserState.ui.homeTutorialCompleted;

  return (
    <MandatoryOnboardingGuard scope="app">
      <main className="app-shell min-h-screen">
        <section className="relative z-10 mx-auto w-full max-w-[1700px] px-3 py-6 sm:px-4 lg:px-5">
          <div className="grid items-stretch gap-5 lg:grid-cols-[320px_minmax(0,1fr)]">
            <aside className="fade-in-up h-full">
              <UserSidebar
                memberEmail={appConfig.demoUser.email}
                totalSessions={progress.totalSessions}
                completedSessions={progress.completedSessions}
                onboardingCompleted={browserState.onboarding.onboardingCompleted}
                actionPlanCompleted={browserState.onboarding.actionPlanCompleted}
                autodiagnosticCompleted={browserState.onboarding.autodiagnosticCompleted}
              />
            </aside>

            <div className="min-w-0 h-full">
              <HomeViewportShell
                scenarios={scenarios}
                viewportMode={viewportMode}
                onViewportModeChange={setViewportMode}
              />
            </div>
          </div>
        </section>
        {shouldShowTutorial ? (
          <HomeTutorialOverlay
            appName={appConfig.appName}
            viewportMode={viewportMode}
          />
        ) : null}
      </main>
    </MandatoryOnboardingGuard>
  );
}