import { HeaderWrapper } from "@/components/header-wrapper";
import { Sidebar } from "@/components/sidebar";
import { ProvidersWrapper } from "@/components/providers-wrapper";
import { auth } from "@/auth";
import { detectUserLanguage } from "@/lib/i18n/detect-user-language";
import { loadTranslations } from "@/lib/i18n/load-translations";

export default async function MainLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Run auth + language detection + translation loading in parallel
  const [session, initialLanguage] = await Promise.all([
    auth(),
    detectUserLanguage(),
  ]);

  // Load initial translations server-side to prevent hydration mismatch
  const initialTranslations = await loadTranslations(initialLanguage);

  return (
    <ProvidersWrapper initialLanguage={initialLanguage} initialTranslations={initialTranslations}>
      <div className="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white overflow-hidden h-screen flex flex-col">
        {/* Top Navigation - Style Keep */}
        <HeaderWrapper user={session?.user} />

        {/* Main Layout */}
        <div className="flex flex-1 overflow-hidden">
          {/* Sidebar Navigation - Style Keep */}
          <Sidebar className="w-64 flex-none flex-col bg-white dark:bg-[#1e2128] border-e border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex" user={session?.user} />

          {/* Main Content Area */}
          <main className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-background-light dark:bg-background-dark p-4 scroll-smooth">
            {children}
          </main>
        </div>
      </div>
    </ProvidersWrapper>
  );
}