'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Box, CircularProgress, Typography } from '@mui/material';
import { useAuthContext } from '../model/AuthProvider';
import { colors } from '@/shared/lib/button-styles';

interface AuthGuardProps {
  children: React.ReactNode;
}

/**
 * 인증 가드 컴포넌트
 * - 로그인하지 않은 사용자는 로그인 페이지로 리다이렉트
 * - user 정보가 없으면 접근 불가
 */
export const AuthGuard = ({ children }: AuthGuardProps) => {
  const { isAuthenticated, user, isLoading } = useAuthContext();
  const router = useRouter();

  useEffect(() => {
    // 로딩이 완료되고 인증되지 않았거나 사용자 정보가 없으면 로그인 페이지로 리다이렉트
    if (!isLoading && (!isAuthenticated || !user)) {
      console.log('🚫 인증되지 않은 접근 시도 - 로그인 페이지로 리다이렉트');
      router.push('/login');
    }
  }, [isLoading, isAuthenticated, user, router]);

  // 로딩 중
  if (isLoading) {
    return (
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: '100vh',
          bgcolor: colors.gray[50],
          gap: 3,
        }}
      >
        <CircularProgress
          size={60}
          sx={{
            color: colors.purple,
          }}
        />
        <Typography
          sx={{
            color: colors.gray[600],
            fontSize: { xs: '0.875rem', sm: '1rem' },
            fontWeight: 500,
          }}
        >
          인증 확인 중...
        </Typography>
      </Box>
    );
  }

  // 인증되지 않았거나 사용자 정보가 없으면 아무것도 렌더링하지 않음 (리다이렉트 처리 중)
  if (!isAuthenticated || !user) {
    return null;
  }

  // 인증된 사용자만 children 렌더링
  return <>{children}</>;
};
