"use client";

import { MandatoryOnboardingGuard } from "@/components/mandatory-onboarding-guard";
import { ReportShell } from "@/components/report-shell";
import { useDemoBrowserState } from "@/lib/demo-session-store";

type ReportPageShellProps = {
  sessionId: string;
};

export function ReportPageShell({ sessionId }: ReportPageShellProps) {
  const browserState = useDemoBrowserState();

  if (typeof window === "undefined") {
    return (
      <main className="app-shell min-h-screen px-5 py-8 sm:px-8 lg:px-10">
        <div className="relative z-10 mx-auto flex min-h-[80vh] max-w-4xl items-center justify-center">
          <div className="glass-card w-full max-w-2xl rounded-[32px] px-8 py-10 text-center">
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--primary)]">
              Rapport
            </p>
            <h1 className="mt-4 text-3xl font-extrabold text-[var(--ink)]">
              Chargement...
            </h1>
          </div>
        </div>
      </main>
    );
  }

  const session =
    browserState.sessions.find((item) => item.sessionId === sessionId) ?? null;

  return (
    <MandatoryOnboardingGuard scope="app">
      <ReportShell session={session} />
    </MandatoryOnboardingGuard>
  );
}