'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React, { useMemo, useState, useEffect } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { useCustomizerStore } from '@/features/dashboard/store/useCustomizerStore';
import { LicenseInfo } from '@mui/x-license';
import { AuthInitializer } from '@/features/login/components/AuthInitializer';

const PERPETUAL_LICENSE_KEY =
  'e0d9bb8070ce0054c9d9ecb6e82cb58fTz0wLEU9MzI0NzIxNDQwMDAwMDAsUz1wcmVtaXVtLExNPXBlcnBldHVhbCxLVj0y';
try {
  LicenseInfo.setLicenseKey(PERPETUAL_LICENSE_KEY);
} catch (error) {
  console.error('Failed to set MUI license key:', error);
}

export default function Providers({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  const [queryClient] = useState(() => new QueryClient());
  const [mounted, setMounted] = useState(false);
  const activeMode = useCustomizerStore((state) => state.activeMode);
  const isHydrated = useCustomizerStore((state) => state.isHydrated);

  useEffect(() => {
    setMounted(true);
  }, []);

  const safeMode = mounted && isHydrated ? activeMode : 'light';

  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode: safeMode,
          primary: {
            main: '#5d87ff',
            light: '#ecf2ff',
            dark: '#4570ea',
          },
          secondary: {
            main: '#49beff',
            light: '#e8f7ff',
            dark: '#23afdb',
          },
          ...(safeMode === 'dark'
            ? {
                text: {
                  primary: '#ffffff',
                  secondary: '#b0bcc8',
                },
                background: {
                  default: '#0b1426',
                  paper: '#111c2e',
                },
              }
            : {
                text: {
                  primary: '#1a1a1a',
                  secondary: '#4a5568',
                },
                background: {
                  default: '#ffffff',
                  paper: '#ffffff',
                },
              }),
        },
        typography: {
          fontFamily: '"Plus Jakarta Sans", "Helvetica", "Arial", sans-serif',
          h1: { fontWeight: 600, fontSize: '2.25rem', lineHeight: 1.2 },
          h2: { fontWeight: 600, fontSize: '1.875rem', lineHeight: 1.2 },
          h3: { fontWeight: 600, fontSize: '1.5rem', lineHeight: 1.2 },
          h4: { fontWeight: 600, fontSize: '1.3125rem', lineHeight: 1.2 },
          h5: { fontWeight: 600, fontSize: '1.125rem', lineHeight: 1.2 },
          h6: { fontWeight: 600, fontSize: '1rem', lineHeight: 1.2 },
          button: { textTransform: 'none', fontWeight: 500 },
          body1: { fontSize: '0.8125rem', fontWeight: 400, lineHeight: 1.5 }, // 13px
          body2: { fontSize: '0.75rem', fontWeight: 400, lineHeight: 1.5 }, // 12px
          subtitle1: { fontSize: '0.875rem', fontWeight: 400 },
          subtitle2: { fontSize: '0.75rem', fontWeight: 400 },
        },
        components: {
          MuiCssBaseline: {
            styleOverrides: {
              body: {
                fontFamily:
                  "var(--font-plus-jakarta), 'Plus Jakarta Sans', sans-serif",
              },
            },
          },
          MuiTypography: {
            styleOverrides: {
              root: ({ theme }) => ({
                ...(theme.palette.mode === 'light' && {
                  color: theme.palette.text.primary,
                }),
              }),
            },
          },
        },
      }),
    [safeMode]
  );

  return (
    <QueryClientProvider client={queryClient}>
      <AuthInitializer>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          {children}
        </ThemeProvider>
      </AuthInitializer>
    </QueryClientProvider>
  );
}
