import React from 'react';
import { Card, CardContent, CardMedia, Box, Typography, Chip } from '@mui/material';
import { AccessTime as AccessTimeIcon, Star as StarIcon } from '@mui/icons-material';
import type { Quiz } from '../../types';

interface CardQuizProps {
  quiz: Quiz;
  onStart: (quizId: number) => void;
  isCompleted?: boolean;
  cooldownTime?: string;
  canStart?: boolean;
}

export const CardQuiz: React.FC<CardQuizProps> = ({
  quiz,
  onStart,
  isCompleted = false,
  cooldownTime,
  canStart = true,
}) => {
  return (
    <Card
      sx={{
        position: 'relative',
        overflow: 'hidden',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        border: '1px solid rgba(255, 255, 255, 0.1)',
        '&:hover': {
          transform: 'translateY(-4px)',
          border: '1px solid rgba(255, 215, 0, 0.3)',
          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
        },
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: isCompleted
            ? 'linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%)'
            : 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%)',
          zIndex: 0,
        },
      }}
    >
      {/* Image with gradient overlay */}
      <Box sx={{ position: 'relative', overflow: 'hidden' }}>
        <CardMedia
          component="img"
          height="180"
          image={quiz.image_url || '/placeholder-quiz.jpg'}
          alt={quiz.title}
          sx={{
            width: '100%',
            height: '180px',
            objectFit: 'cover',
            objectPosition: 'center',
            transition: 'transform 0.3s ease',
            '&:hover': {
              transform: 'scale(1.05)',
            },
          }}
        />
        <Box
          sx={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
            zIndex: 1,
          }}
        />

        {/* Status badge */}
        {isCompleted && (
          <Chip
            label="Пройдено ✓"
            size="small"
            sx={{
              position: 'absolute',
              top: 12,
              right: 12,
              backgroundColor: 'rgba(76, 175, 80, 0.9)',
              color: '#FFFFFF',
              fontWeight: 'bold',
              border: 'none',
              zIndex: 2,
            }}
          />
        )}
      </Box>

      <CardContent
        sx={{
          flexGrow: 1,
          display: 'flex',
          flexDirection: 'column',
          p: 3,
          position: 'relative',
          zIndex: 1,
        }}
      >
        {/* Title */}
        <Typography
          variant="h6"
          sx={{
            color: '#FFFFFF',
            fontWeight: 600,
            mb: 1,
            lineHeight: 1.3,
            fontSize: 18,
          }}
        >
          {quiz.title}
        </Typography>

        {/* Description */}
        <Typography
          variant="body2"
          sx={{
            color: '#B0B0B0',
            mb: 3,
            flexGrow: 1,
            display: '-webkit-box',
            WebkitLineClamp: 3,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            lineHeight: 1.5,
          }}
        >
          {quiz.description}
        </Typography>

        {/* Info chips */}
        <Box
          sx={{
            display: 'flex',
            gap: 1,
            flexWrap: 'wrap',
            mb: 3,
          }}
        >
          <Chip
            icon={
              <StarIcon
                sx={{
                  fontSize: 16,
                  color: '#FFD700',
                }}
              />
            }
            label={`+${quiz.reward_stars} ⭐`}
            size="small"
            sx={{
              backgroundColor: 'rgba(255, 215, 0, 0.15)',
              color: '#FFD700',
              border: '1px solid rgba(255, 215, 0, 0.3)',
              fontWeight: 600,
              '& .MuiChip-icon': {
                color: '#FFD700',
              },
            }}
          />

          {quiz.has_timer && (
            <Chip
              icon={
                <AccessTimeIcon
                  sx={{
                    fontSize: 16,
                    color: '#FFFFFF',
                  }}
                />
              }
              label={`${quiz.timer_per_question} сек`}
              size="small"
              sx={{
                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                color: '#FFFFFF',
                border: '1px solid rgba(255, 255, 255, 0.2)',
                fontWeight: 600,
                '& .MuiChip-icon': {
                  color: '#FFFFFF',
                },
              }}
            />
          )}
        </Box>

        {/* Action button */}
        <Box
          sx={{
            mt: 'auto',
          }}
        >
          {cooldownTime && !canStart ? (
            <Box
              sx={{
                p: 2,
                textAlign: 'center',
                backgroundColor: 'rgba(255, 152, 0, 0.1)',
                border: '1px solid rgba(255, 152, 0, 0.3)',
                borderRadius: 1,
              }}
            >
              <Typography
                variant="body2"
                sx={{
                  color: '#FF9800',
                  fontWeight: 600,
                }}
              >
                {cooldownTime}
              </Typography>
            </Box>
          ) : (
            <Box
              sx={{
                position: 'relative',
                overflow: 'hidden',
                cursor: canStart ? 'pointer' : 'default',
                '&::before': {
                  content: '""',
                  position: 'absolute',
                  top: 0,
                  left: '-100%',
                  width: '100%',
                  height: '100%',
                  background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)',
                  transition: 'left 0.5s',
                },
                '&:hover::before': {
                  left: '100%',
                },
              }}
              onClick={() => canStart && onStart(quiz.id)}
            >
              <Box
                sx={{
                  p: 2.5,
                  textAlign: 'center',
                  background: canStart
                    ? 'linear-gradient(135deg, #FFD700 0%, #FFC700 100%)'
                    : 'linear-gradient(135deg, #666666 0%, #555555 100%)',
                  borderRadius: 1,
                  boxShadow: canStart
                    ? '0 4px 15px rgba(255, 215, 0, 0.3)'
                    : 'none',
                  transition: 'all 0.3s ease',
                  '&:hover': {
                    transform: canStart ? 'translateY(-2px)' : 'none',
                    boxShadow: canStart
                      ? '0 6px 20px rgba(255, 215, 0, 0.4)'
                      : 'none',
                  },
                }}
              >
                <Typography
                  variant="body1"
                  sx={{
                    color: canStart ? '#000000' : '#FFFFFF',
                    fontWeight: 700,
                    fontSize: 16,
                  }}
                >
                  {isCompleted ? 'Повторить' : canStart ? 'Начать' : 'Недоступно'}
                </Typography>
              </Box>
            </Box>
          )}
        </Box>
      </CardContent>
    </Card>
  );
};