src/components/theme/ThemeLayoutWrapper.tsx

"use client";

import { useTheme } from "next-themes";
import { usePathname } from "next/navigation";
import { useHydrated } from "@/hooks/useHydrated";
import { AppShellDark } from "@/components/dark/layout/AppShellDark";
import { CleanAppLayout } from "@/components/clean/layout/CleanAppLayout";

export function ThemeLayoutWrapper({ children }: { children: React.ReactNode }) {
  const { resolvedTheme } = useTheme();
  const mounted = useHydrated();
  const pathname = usePathname();
  const isTuitionWorkspace = pathname === "/tuition" || pathname?.startsWith("/tuition/");

  // Tuition is intentionally light-only so the class never changes visual
  // systems when the student's device theme changes.
  if (isTuitionWorkspace) {
    return <CleanAppLayout>{children}</CleanAppLayout>;
  }

  // During SSR and initial hydration, default to AppShellDark to prevent flash if dark was default,
  // or return a simpler loading skeleton if you prefer.
  if (!mounted) {
    return <AppShellDark>{children}</AppShellDark>;
  }

  if (resolvedTheme === "light") {
    return <CleanAppLayout>{children}</CleanAppLayout>;
  }

  return <AppShellDark>{children}</AppShellDark>;
}