'use client';

import { useEffect, useState, useRef } from 'react';
import { Box, Container, Typography, CircularProgress, LinearProgress } from '@mui/material';
import { AutoAwesome } from '@mui/icons-material';
import { eventApi } from '@/shared/api/eventApi';
import type { AiRecommendationResult } from '@/shared/api/eventApi';

// 디자인 시스템 색상
const colors = {
  pink: '#F472B6',
  purple: '#C084FC',
  purpleLight: '#E9D5FF',
  blue: '#60A5FA',
  mint: '#34D399',
  gray: {
    900: '#1A1A1A',
    700: '#4A4A4A',
    500: '#9E9E9E',
  },
};

interface LoadingStepProps {
  eventId: string;
  onComplete: (data: AiRecommendationResult) => void;
  onError: (error: string) => void;
}

export default function LoadingStep({ eventId, onComplete, onError }: LoadingStepProps) {
  const [progress, setProgress] = useState(0);
  const [message, setMessage] = useState('AI가 최적의 이벤트를 분석하고 있습니다...');
  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const startTimeRef = useRef<number>(Date.now());

  useEffect(() => {
    console.log('🔄 LoadingStep 시작, eventId:', eventId);

    // 진행 상태 메시지 업데이트
    const messageInterval = setInterval(() => {
      const elapsed = Date.now() - startTimeRef.current;

      if (elapsed < 15000) {
        setMessage('AI가 업종 및 지역 트렌드를 분석하고 있습니다...');
      } else if (elapsed < 30000) {
        setMessage('고객 타겟과 이벤트 컨셉을 생성하고 있습니다...');
      } else if (elapsed < 45000) {
        setMessage('예상 효과와 비용을 계산하고 있습니다...');
      } else {
        setMessage('최종 추천안을 정리하고 있습니다...');
      }
    }, 1000);

    // 진행률 애니메이션 (60초 기준)
    const progressInterval = setInterval(() => {
      setProgress((prev) => {
        const elapsed = Date.now() - startTimeRef.current;
        const newProgress = Math.min((elapsed / 60000) * 100, 95); // 최대 95%까지만
        return newProgress;
      });
    }, 100);

    // 폴링으로 AI 추천 결과 조회 (3초마다)
    const pollRecommendations = async () => {
      try {
        console.log('📡 AI 추천 결과 조회 시도...');
        const result = await eventApi.getAiRecommendations(eventId);

        console.log('✅ AI 추천 결과 조회 성공:', result);
        console.log('📊 Response 전체 구조:', JSON.stringify(result, null, 2));

        // 데이터가 준비되었는지 확인
        // recommendations 배열이 있으면 성공으로 간주
        if (result && result.recommendations && result.recommendations.length > 0) {
          console.log('🎉 AI 추천 데이터 준비 완료!');
          setProgress(100);
          setMessage('추천안 생성 완료!');

          // 정리
          if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
          if (timeoutRef.current) clearTimeout(timeoutRef.current);
          clearInterval(messageInterval);
          clearInterval(progressInterval);

          // 완료 콜백 호출
          setTimeout(() => {
            onComplete(result);
          }, 500);
        } else {
          console.log('⏳ 데이터는 받았지만 추천안이 아직 없음, 계속 대기...');
        }
      } catch (error: any) {
        console.log('⏳ AI 추천 결과 아직 준비되지 않음 (에러 발생), 계속 대기...');
        console.log('   에러 상태:', error.response?.status);
        console.log('   에러 메시지:', error.message);
        // 404나 데이터 없음 에러는 정상 (아직 생성 중)
        // 계속 폴링
      }
    };

    // 초기 조회 (즉시)
    pollRecommendations();

    // 폴링 시작 (3초마다)
    pollingIntervalRef.current = setInterval(pollRecommendations, 3000);

    // 타임아웃 설정 (60초)
    timeoutRef.current = setTimeout(() => {
      console.error('⏰ AI 추천 생성 타임아웃 (60초 초과)');

      // 정리
      if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
      clearInterval(messageInterval);
      clearInterval(progressInterval);

      onError('AI 추천 생성 시간이 초과되었습니다. 다시 시도해 주세요.');
    }, 60000);

    // 클린업
    return () => {
      if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      clearInterval(messageInterval);
      clearInterval(progressInterval);
    };
  }, [eventId, onComplete, onError]);

  return (
    <Box
      sx={{
        minHeight: '100vh',
        bgcolor: 'background.default',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Container maxWidth="sm">
        <Box sx={{ textAlign: 'center' }}>
          {/* AI 아이콘 애니메이션 */}
          <Box
            sx={{
              mb: 6,
              animation: 'pulse 2s ease-in-out infinite',
              '@keyframes pulse': {
                '0%, 100%': {
                  opacity: 1,
                  transform: 'scale(1)',
                },
                '50%': {
                  opacity: 0.8,
                  transform: 'scale(1.05)',
                },
              },
            }}
          >
            <AutoAwesome sx={{ fontSize: 80, color: colors.purple }} />
          </Box>

          {/* 로딩 메시지 */}
          <Typography
            variant="h4"
            sx={{
              fontWeight: 700,
              mb: 2,
              fontSize: { xs: '1.5rem', sm: '2rem' },
              color: colors.gray[900],
            }}
          >
            AI 추천 생성 중
          </Typography>

          <Typography
            variant="body1"
            sx={{
              mb: 6,
              color: colors.gray[700],
              fontSize: { xs: '0.875rem', sm: '1rem' },
            }}
          >
            {message}
          </Typography>

          {/* 진행률 바 */}
          <Box sx={{ mb: 2 }}>
            <LinearProgress
              variant="determinate"
              value={progress}
              sx={{
                height: 8,
                borderRadius: 4,
                bgcolor: colors.purpleLight,
                '& .MuiLinearProgress-bar': {
                  borderRadius: 4,
                  background: `linear-gradient(90deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
                },
              }}
            />
          </Box>

          <Typography variant="caption" sx={{ color: colors.gray[500] }}>
            {Math.round(progress)}%
          </Typography>

          {/* 안내 메시지 */}
          <Box
            sx={{
              mt: 8,
              p: 3,
              borderRadius: 3,
              bgcolor: `${colors.purpleLight}40`,
            }}
          >
            <Typography
              variant="body2"
              sx={{
                color: colors.gray[700],
                fontSize: { xs: '0.8125rem', sm: '0.875rem' },
                lineHeight: 1.6,
              }}
            >
              💡 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트 3가지를 추천해 드립니다.
              <br />
              최대 1분 정도 소요될 수 있습니다.
            </Typography>
          </Box>
        </Box>
      </Container>
    </Box>
  );
}
