'use client';

import { Provider } from 'react-redux';
import { store } from '@/lib/store/store';
import { ThemeProvider } from 'next-themes';
import { Toaster } from 'sonner';
import AuthGuard from './auth/auth-guard';
import dynamic from 'next/dynamic';
import { registerGlobalMessage } from '@/components/common/GlobalMessage';
import { useEffect } from 'react';
import { DeviceTypeProvider } from '@/hooks/useDeviceType';

const DevHelper = dynamic(
  () => import('@/utils/dev-helper').then(mod => (mod as any).default),
  { ssr: false }
);

export function Providers({ children }: { children: React.ReactNode }) {
  // 注册全局消息提醒
  useEffect(() => {
    registerGlobalMessage();
  }, []);

  return (
    <Provider store={store}>
      <DeviceTypeProvider>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem
          disableTransitionOnChange
        >
          <AuthGuard>
            {children}
          </AuthGuard>
          <Toaster 
            position="bottom-left"
            theme="dark"
            richColors
            toastOptions={{
              // 统一配置所有 toast 的样式
              classNames: {
                toast: "dark:bg-zinc-900 dark:text-zinc-100 dark:border-zinc-800",
                title: "dark:text-zinc-100 font-medium",
                description: "dark:text-zinc-400",
                actionButton: "dark:bg-zinc-700 dark:text-zinc-100",
                cancelButton: "dark:bg-zinc-600 dark:text-zinc-100",
                closeButton: "dark:text-zinc-300 hover:text-zinc-100"
              },
              duration: 3000,
            }}
          />
          {process.env.NODE_ENV === 'development' && <DevHelper />}
        </ThemeProvider>
      </DeviceTypeProvider>
    </Provider>
  );
}