import React from 'react';
import { motion } from 'framer-motion';

type QuizInputProps = {
  currentRound: number;
  answer: string;
  setAnswer: React.Dispatch<React.SetStateAction<string>>;
  disabled?: boolean;
  readOnly?: boolean;
};

export function QuizInput({ 
  currentRound, 
  answer, 
  setAnswer, 
  disabled = false, 
  readOnly = false 
}: QuizInputProps) {
  /**
   * Renders multiple choice buttons if round = 1, otherwise a textarea.
   */
  const renderInput = () => {
    if (currentRound === 1) {
      // Multiple choice for Round 1
      return (
        <div className="grid grid-cols-2 gap-4">
          {['А', 'Б', 'В', 'Г'].map((option, index) => (
            <motion.button
              key={option}
              type="button"
              onClick={() => !disabled && setAnswer(option)}
              whileHover={!disabled ? { scale: 1.02 } : {}}
              whileTap={!disabled ? { scale: 0.98 } : {}}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
              disabled={disabled}
              className={`
                relative h-24 text-3xl font-bold rounded-xl shadow-lg
                transition-all duration-300
                ${
                  answer === option
                    ? 'bg-gradient-to-br from-amber-500 to-orange-500 text-white'
                    : 'bg-white/60 backdrop-blur-sm hover:bg-white/80 text-amber-900 border border-amber-100/50'
                }
                ${disabled && answer !== option ? 'opacity-50 cursor-not-allowed' : ''}
                ${disabled && answer === option ? 'opacity-90' : ''}
              `}
            >
              <div className="absolute inset-0 bg-gradient-to-br from-amber-100/20 to-orange-100/20 rounded-xl -z-10" />
              {option}
            </motion.button>
          ))}
        </div>
      );
    } else {
      // Text input for other rounds
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="relative"
        >
          <textarea
            value={answer}
            onChange={(e) => !readOnly && setAnswer(e.target.value)}
            placeholder={readOnly ? "" : "Вашият отговор"}
            readOnly={readOnly}
            disabled={disabled}
            className={`w-full px-6 py-4 text-xl bg-white/60 backdrop-blur-sm border-2 border-amber-200/50 rounded-xl focus:border-amber-400 focus:outline-none transition-all duration-300 placeholder:text-amber-800/40 min-h-[120px] resize-y text-amber-900 ${
              disabled ? 'opacity-90 cursor-not-allowed' : ''
            }`}
          />
          <div className="absolute inset-0 bg-gradient-to-br from-amber-100/20 to-orange-100/20 rounded-xl -z-10" />
        </motion.div>
      );
    }
  };

  return <>{renderInput()}</>;
}