import React from 'react';
import { Box, LinearProgress, Typography, Stack } from '@mui/material';
import { AccessTime as AccessTimeIcon } from '@mui/icons-material';

interface QuizProgressProps {
  currentQuestion: number;
  totalQuestions: number;
  timeRemaining?: number;
  hasTimer: boolean;
}

export const QuizProgress: React.FC<QuizProgressProps> = ({
  currentQuestion,
  totalQuestions,
  timeRemaining,
  hasTimer,
}) => {
  const progress = (currentQuestion / totalQuestions) * 100;

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const timeColor = timeRemaining && timeRemaining <= 10 ? '#F44336' : '#FFD700';

  return (
    <Box
      sx={{
        mb: 4,
        p: 3,
        background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%)',
        borderRadius: 2,
        border: '1px solid rgba(255, 215, 0, 0.2)',
        position: 'relative',
        overflow: 'hidden',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '2px',
          background: 'linear-gradient(90deg, #FFD700, #FFC700, #FFD700)',
          animation: 'shine 2s ease-in-out infinite',
        },
      }}
    >
      {/* Progress info */}
      <Stack
        direction={{ xs: 'column', sm: 'row' }}
        justifyContent="space-between"
        alignItems={{ xs: 'flex-start', sm: 'center' }}
        spacing={2}
        mb={2}
      >
        <Box>
          <Typography
            variant="h6"
            sx={{
              color: '#FFFFFF',
              fontWeight: 600,
              mb: 0.5,
            }}
          >
            Вопрос {currentQuestion} из {totalQuestions}
          </Typography>
          <Typography
            variant="body2"
            sx={{
              color: '#B0B0B0',
            }}
          >
            Прогресс: {Math.round(progress)}%
          </Typography>
        </Box>

        {hasTimer && timeRemaining !== undefined && (
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              p: 1.5,
              backgroundColor: timeRemaining <= 10
                ? 'rgba(244, 67, 54, 0.1)'
                : 'rgba(255, 215, 0, 0.1)',
              borderRadius: 1,
              border: timeRemaining <= 10
                ? '1px solid rgba(244, 67, 54, 0.3)'
                : '1px solid rgba(255, 215, 0, 0.3)',
            }}
          >
            <AccessTimeIcon
              sx={{
                color: timeColor,
                fontSize: 20,
                animation: timeRemaining <= 10 ? 'pulse 1s ease-in-out infinite' : 'none',
              }}
            />
            <Typography
              variant="h6"
              sx={{
                color: timeColor,
                fontWeight: 700,
                fontSize: 18,
                animation: timeRemaining <= 10 ? 'pulse 1s ease-in-out infinite' : 'none',
              }}
            >
              {formatTime(timeRemaining)}
            </Typography>
          </Box>
        )}
      </Stack>

      {/* Progress bar */}
      <Box sx={{ position: 'relative' }}>
        <LinearProgress
          variant="determinate"
          value={progress}
          sx={{
            height: 12,
            borderRadius: 6,
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            '& .MuiLinearProgress-bar': {
              borderRadius: 6,
              background: 'linear-gradient(90deg, #FFD700, #FFC700)',
              position: 'relative',
              overflow: 'hidden',
              '&::after': {
                content: '""',
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)',
                animation: 'shine 2s ease-in-out infinite',
              },
            },
          }}
        />
      </Box>

      {/* Question indicators */}
      <Box
        sx={{
          display: 'flex',
          gap: 0.5,
          mt: 2,
          flexWrap: 'wrap',
        }}
      >
        {Array.from({ length: totalQuestions }, (_, index) => (
          <Box
            key={index}
            sx={{
              width: 24,
              height: 24,
              borderRadius: '50%',
              backgroundColor: index + 1 < currentQuestion
                ? '#4CAF50'
                : index + 1 === currentQuestion
                ? '#FFD700'
                : 'rgba(255, 255, 255, 0.1)',
              border: index + 1 === currentQuestion
                ? '2px solid #FFD700'
                : '1px solid rgba(255, 255, 255, 0.2)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 12,
              fontWeight: 600,
              color: index + 1 === currentQuestion ? '#000000' : '#FFFFFF',
              transition: 'all 0.3s ease',
              animation: index + 1 === currentQuestion ? 'pulse 2s ease-in-out infinite' : 'none',
            }}
          >
            {index + 1}
          </Box>
        ))}
      </Box>
    </Box>
  );
};