'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '../../lib/authContext';

export default function RootPage() {
  const { user, isLoading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading) {
      if (user) {
        // User is logged in, redirect to their specific dashboard
        if (user.role === 'employee') {
          if (user.isIntern) {
            router.replace('/intern');
          } else {
            router.replace('/employee');
          }
        } else if (user.role === 'hr') {
          router.replace('/hr');
        } else if (user.role === 'admin') {
          router.replace('/admin');
        } else if (user.role === 'hod') {
          router.replace('/hod');
        } else if (user.role === 'hos') {
          router.replace('/hos');
        } else if (user.role === 'finance') {
          router.replace('/finance');
        } else {
          router.replace('/dashboard');
        }
      } else {
        // No user, redirect to login
        router.replace('/login');
      }
    }
  }, [user, isLoading, router]);

  // Show loading spinner while checking auth
  return (
    <div className="min-h-screen flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
      <div className="bg-white p-8 rounded-3xl shadow-2xl">
        <div className="flex items-center gap-3">
          <i className="ri-loader-4-line animate-spin text-2xl" style={{ color: '#764ba2' }}></i>
          <span className="text-gray-600">Loading...</span>
        </div>
      </div>
    </div>
  );
}