import { Suspense } from "react";
import { HeaderWrapper } from "@/components/header-wrapper";
import { Sidebar } from "@/components/sidebar";
import { ProvidersWrapper } from "@/components/providers-wrapper";
import { auth } from "@/auth";
import { headers } from "next/headers";
import { detectUserLanguage, parseAcceptLanguage } from "@/lib/i18n/detect-user-language";
import { loadTranslations } from "@/lib/i18n/load-translations";
import { getAISettings } from "@/app/actions/ai-settings";

import { AIChat } from "@/components/ai-chat";

export default async function MainLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // Read browser language hint from Accept-Language header
  const headersList = await headers();
  const browserLang = parseAcceptLanguage(headersList.get("accept-language"));

  // Run auth + language detection + translation loading in parallel
  const [session, initialLanguage] = await Promise.all([
    auth(),
    detectUserLanguage(browserLang),
  ]);

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

  // Load AI settings to conditionally render AI features
  const aiSettings = session?.user?.id
    ? await getAISettings(session.user.id)
    : null;
  const showAIAssistant = aiSettings?.paragraphRefactor !== false;

  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 relative">
          {/* Sidebar Navigation - Style Keep */}
          <Suspense fallback={<div className="w-64 flex-none hidden md:flex" />}>
            <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} />
          </Suspense>

          {/* 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>

          {/* AI Chat Drawer — only shown if user has Assistant IA enabled */}
          {showAIAssistant && <AIChat />}
        </div>
      </div>
    </ProvidersWrapper>
  );
}