'use client';

import { useEffect } from 'react';
import { Toaster } from 'react-hot-toast';
import { useAuthStore } from '@/store/authStore';
import { authApi } from '@/lib/api';
import { connectSocket, disconnectSocket } from '@/lib/socket';

export default function Providers({ children }: { children: React.ReactNode }) {
  const { setUser, setLoading } = useAuthStore();

  useEffect(() => {
    const init = async () => {
      try {
        const token = localStorage.getItem('accessToken');
        if (token) {
          const { data } = await authApi.me();
          setUser(data);
          connectSocket(token);
        }
      } catch {
        localStorage.removeItem('accessToken');
        localStorage.removeItem('refreshToken');
      } finally {
        setLoading(false);
      }
    };

    const darkMode = localStorage.getItem('darkMode');
    if (darkMode === 'false') {
      document.documentElement.classList.remove('dark');
      document.documentElement.classList.add('light');
    }

    init();

    return () => {
      disconnectSocket();
    };
  }, []);

  return (
    <>
      {children}
      <Toaster
        position="top-right"
        toastOptions={{
          duration: 4000,
          style: {
            background: '#1a1a35',
            color: '#e0e0f0',
            border: '1px solid #2a2a50',
            borderRadius: '12px',
          },
          success: { iconTheme: { primary: '#10b981', secondary: '#1a1a35' } },
          error: { iconTheme: { primary: '#ef4444', secondary: '#1a1a35' } },
        }}
      />
    </>
  );
}