import type { Metadata } from 'next';
import { ThemeProvider } from 'next-themes';
import './backend.scss';
import './globals.css';

import { Text } from '@/components/ui/text';
import { Toaster } from '@/components/ui/toaster';
import ReduxProvider from '@/store/provider';
import { globalApiPost } from '@/services/global/globalApiCalls';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import { WOSA_ADMIN_URL } from '@/config/site-config';
import { UnknownRecord } from '@/types';
import TopBar from '@/components/theme/top-bar/TopBar';
import BottomBar from '@/components/theme/bottom-bar/BottomBar';
import { globalApiPostServer } from '@/services/global/globalApi.server';
import GlobalLoader from '@/components/common/GlobalLoader';

export const metadata: Metadata = {
  title: 'Western Overseas Backend ERP',
  description: 'Western Overseas Backend ERP App',
};

// Make layout dynamic since it uses cookies
export const dynamic = 'force-dynamic';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  let sessionData: UnknownRecord | null = null;

  try {
    // Use only server-side cookies() function
    const cookieStore = await cookies();
    const sessionId = cookieStore.get('session_id')?.value;
    if (sessionId) {
      const response = await globalApiPostServer('global/validate-session', {
        session_id: sessionId,
      });
      sessionData = (response as UnknownRecord).data || null;
    }
  } catch (error) {
    console.error('Session validation failed:', error);
  }

  // Redirect if no session data
  if (!sessionData) {
    redirect(`${WOSA_ADMIN_URL}dashboard?logged_out=1`);
  }

  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`erp-western-overseas overflow-hidden`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem={false}
          value={{
            marble: 'marble',
            graphite: 'graphite',
            sapphire: 'sapphire',
            lavender: 'lavender',
            azure: 'azure',
            dark: 'dark',
          }}
        >
          <ReduxProvider sessionData={sessionData || {}}>
            <Text className="wrapper">
              <TopBar />
              {children}
              <BottomBar />
            </Text>
            <GlobalLoader />
            <Toaster />
          </ReduxProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}
