'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Box, CircularProgress, Typography } from '@mui/material';
import { useAuthContext } from '@/features/auth';
import { useUIStore } from '@/stores/uiStore';

export default function LogoutPage() {
  const router = useRouter();
  const { logout } = useAuthContext();
  const { showToast } = useUIStore();

  useEffect(() => {
    const handleLogout = async () => {
      try {
        console.log('🚪 로그아웃 시작');
        await logout();
        console.log('✅ 로그아웃 완료');
        showToast('로그아웃되었습니다', 'success');

        // 로그인 페이지로 리디렉션
        setTimeout(() => {
          router.push('/login');
        }, 500);
      } catch (error) {
        console.error('❌ 로그아웃 에러:', error);
        showToast('로그아웃 중 오류가 발생했습니다', 'error');

        // 에러가 발생해도 로그인 페이지로 이동
        setTimeout(() => {
          router.push('/login');
        }, 1000);
      }
    };

    handleLogout();
  }, [logout, router, showToast]);

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        background: 'linear-gradient(135deg, #FFF 0%, #F5F5F5 100%)',
      }}
    >
      <CircularProgress size={60} sx={{ mb: 3 }} />
      <Typography variant="h6" color="text.secondary">
        로그아웃 중입니다...
      </Typography>
    </Box>
  );
}
