import React from 'react';
import { Box, Typography, Card } from '@mui/material';
import { RadioButtonUnchecked, CheckBoxOutlineBlank, CheckCircle, CheckBox } from '@mui/icons-material';

interface AnswerOptionProps {
  id: string;
  text: string;
  type: 'single' | 'multiple';
  isSelected: boolean;
  isCorrect?: boolean;
  showResult?: boolean;
  onSelect: (id: string) => void;
  disabled?: boolean;
}

export const AnswerOption: React.FC<AnswerOptionProps> = ({
  id,
  text,
  type,
  isSelected,
  isCorrect,
  showResult = false,
  onSelect,
  disabled = false,
}) => {
  const handleClick = () => {
    console.log('AnswerOption handleClick called:', { id, disabled, showResult });
    if (!disabled && !showResult) {
      console.log('Calling onSelect with:', id);
      onSelect(id);
    }
  };

  const getCardStyles = () => {
    if (showResult) {
      if (isCorrect) {
        return {
          backgroundColor: 'rgba(76, 175, 80, 0.1)',
          border: '2px solid #4CAF50',
          cursor: 'default',
        };
      } else if (isSelected && !isCorrect) {
        return {
          backgroundColor: 'rgba(244, 67, 54, 0.1)',
          border: '2px solid #F44336',
          cursor: 'default',
        };
      }
    }

    if (isSelected) {
      return {
        backgroundColor: 'rgba(255, 215, 0, 0.1)',
        border: '2px solid #FFD700',
        cursor: disabled ? 'default' : 'pointer',
      };
    }

    return {
      backgroundColor: 'rgba(255, 255, 255, 0.02)',
      border: '1px solid rgba(255, 255, 255, 0.1)',
      cursor: disabled ? 'default' : 'pointer',
    };
  };

  const getIcon = () => {
    if (showResult) {
      if (isCorrect) {
        return type === 'single' ? (
          <CheckCircle sx={{ color: '#4CAF50', fontSize: 24 }} />
        ) : (
          <CheckBox sx={{ color: '#4CAF50', fontSize: 24 }} />
        );
      } else if (isSelected && !isCorrect) {
        return type === 'single' ? (
          <CheckCircle sx={{ color: '#F44336', fontSize: 24 }} />
        ) : (
          <CheckBox sx={{ color: '#F44336', fontSize: 24 }} />
        );
      }
    }

    if (isSelected) {
      return type === 'single' ? (
        <CheckCircle sx={{ color: '#FFD700', fontSize: 24 }} />
      ) : (
        <CheckBox sx={{ color: '#FFD700', fontSize: 24 }} />
      );
    }

    return type === 'single' ? (
      <RadioButtonUnchecked sx={{ color: '#B0B0B0', fontSize: 24 }} />
    ) : (
      <CheckBoxOutlineBlank sx={{ color: '#B0B0B0', fontSize: 24 }} />
    );
  };

  return (
    <Card
      onClick={handleClick}
      sx={{
        mb: 2,
        borderRadius: 1.5,
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        position: 'relative',
        overflow: 'hidden',
        cursor: !disabled && !showResult ? 'pointer' : 'default',
        zIndex: 1,
        ...getCardStyles(),
        '&:hover': !disabled && !showResult ? {
          transform: 'translateY(-2px)',
          boxShadow: '0 8px 25px rgba(0, 0, 0, 0.3)',
          border: isSelected ? '2px solid #FFD700' : '1px solid rgba(255, 215, 0, 0.3)',
        } : {},
        '&::before': !disabled && !showResult ? {
          content: '""',
          position: 'absolute',
          top: 0,
          left: '-100%',
          width: '100%',
          height: '100%',
          background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)',
          transition: 'left 0.5s',
          zIndex: -1,
        } : {},
        '&:hover::before': !disabled && !showResult ? {
          left: '100%',
        } : {},
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'flex-start',
          gap: 3,
          p: 3,
          position: 'relative',
          zIndex: 1,
        }}
      >
        {/* Icon */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minWidth: 24,
            mt: 0.5,
          }}
        >
          {getIcon()}
        </Box>

        {/* Text */}
        <Box sx={{ flexGrow: 1 }}>
          <Typography
            variant="body1"
            sx={{
              color: showResult
                ? isCorrect
                  ? '#4CAF50'
                  : isSelected && !isCorrect
                  ? '#F44336'
                  : '#FFFFFF'
                : '#FFFFFF',
              fontWeight: 500,
              lineHeight: 1.5,
              fontSize: 16,
              transition: 'color 0.3s ease',
            }}
          >
            {text}
          </Typography>
        </Box>

        {/* Selection indicator */}
        {isSelected && !showResult && (
          <Box
            sx={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%)',
              pointerEvents: 'none',
              animation: 'fadeIn 0.3s ease-out',
            }}
          />
        )}
      </Box>
    </Card>
  );
};