import React, { useCallback, useMemo, useState } from 'react';
import { Box, Button, Card, Flex, Grid, Typo } from '@/atoms';
import { type CurriculumReviewQuestionRadio } from '@/types/curriculumContents.type'; 
import { RadioButtonCard } from "../../../../radio-button-card";
import { ReviewQuestionContentHeader } from './review-comp';

interface ReviewQuestionRadioProps {
  question: CurriculumReviewQuestionRadio;
  answer: string;
  error?: string;
  onChange: (value: string) => void;
}

const correctAnswerStyle: React.CSSProperties = {
  backgroundColor: 'var(--green-a2)',
};

function ReviewQuestionRadio(props: ReviewQuestionRadioProps): React.ReactNode {
  const { question, answer, onChange } = props;
  const [isCheckAnswer, setIsCheckAnswer] = useState(false);

  const checkAnswer = useCallback(() => {
    setIsCheckAnswer(true);
  }, []);

  const isCorrect = isCheckAnswer && Number(answer) === question.correctAnswer;
  const isWrong = isCheckAnswer && Number(answer) !== question.correctAnswer;
  const radioColor = useMemo(() => {
    if (isCorrect) return 'green';
    if (isWrong) return 'red';
    return undefined;
  }, [isCorrect, isWrong]);

  return (
    <Grid height="100%" rows="auto 1fr" width="100%">
      <Card mb="4" size="2">
        <ReviewQuestionContentHeader
          icon={question.icon}
          question={question.question}
          title={question.title}
          type={question.type}
        />
      </Card>

      <Grid height="100%" rows="1fr auto" width="100%">
        <Box position="relative">
          <RadioButtonCard.Root
            color={radioColor}
            onValueChange={onChange}
            style={{
              width: '100%',
              height: '100%',
              overflowY: 'auto',
              position: 'absolute',
            }}
            value={answer}
          >
            <Flex direction="column" gap="2" width="100%">
              {question.options.map((option, i) => {
                const isThisOptionCorrect =
                  isCheckAnswer && i === question.correctAnswer;
                const isThisOptionSelected =
                  isCheckAnswer && i === Number(answer);
                const isThisOptionWrong =
                  isCheckAnswer &&
                  isThisOptionSelected &&
                  i !== question.correctAnswer;
                const style = (() => {
                  if (isThisOptionCorrect) return correctAnswerStyle;
                  return {};
                })();

                return (
                  <RadioButtonCard.Item
                    // eslint-disable-next-line react/no-array-index-key -- 조합 키로 중복 회피
                    key={`${option.label}-${i}`}
                    style={style}
                    value={i.toString()}
                  >
                    <Box>
                      <Typo as="p">{option.label}</Typo>
                      {isThisOptionCorrect ? (
                        <Typo color="green">정답입니다</Typo>
                      ) : null}
                      {isThisOptionWrong ? (
                        <Typo color="red">정답이 아닙니다</Typo>
                      ) : null}
                    </Box>
                  </RadioButtonCard.Item>
                );
              })}
            </Flex>
          </RadioButtonCard.Root>
        </Box>
        <Flex justify="end" mt="2">
          <Button onClick={checkAnswer}>정답 확인</Button>
        </Flex>
      </Grid>
    </Grid>
  );
}

export default ReviewQuestionRadio;
