import React from 'react';
import { Portal } from '../components/Portal';
import { motion, AnimatePresence } from 'framer-motion';
import { FaTimes, FaQuestionCircle } from 'react-icons/fa';

type Answer = {
  question: number;
  round: number;
  answer: string;
};

export function AnswersHistory({
  answersHistory,
  setShowHistory
}: {
  answersHistory: Answer[];
  setShowHistory: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  // Group answers by round
  const answersByRound = answersHistory.reduce((acc, answer) => {
    if (!acc[answer.round]) {
      acc[answer.round] = [];
    }
    acc[answer.round].push(answer);
    return acc;
  }, {} as Record<number, Answer[]>);

  return (
    <Portal>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      >
        <motion.div
          initial={{ scale: 0.95, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.95, opacity: 0 }}
          className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden flex flex-col"
        >
          {/* Header */}
          <div className="p-6 border-b border-amber-100 flex justify-between items-center bg-gradient-to-r from-amber-50 to-orange-50 shrink-0">
            <h2 className="text-2xl font-bold text-amber-900 flex items-center gap-2">
              <FaQuestionCircle className="text-amber-500" />
              История на отговорите
            </h2>
            <motion.button
              whileHover={{ scale: 1.1, rotate: 90 }}
              whileTap={{ scale: 0.9 }}
              onClick={() => setShowHistory(false)}
              className="text-amber-500 hover:text-amber-600 transition-colors"
            >
              <FaTimes size={24} />
            </motion.button>
          </div>

          {/* Content */}
          <div className="overflow-y-auto p-6 space-y-6 flex-1">
            {answersHistory.length === 0 ? (
              <div className="text-center py-8">
                <p className="text-amber-900/70 text-lg">Все още няма отговори</p>
              </div>
            ) : (
              Object.entries(answersByRound)
                .sort(([a], [b]) => Number(a) - Number(b))
                .map(([round, answers]) => (
                  <div key={round} className="space-y-3">
                    <div className="text-xl font-semibold text-amber-900 border-b border-amber-200 pb-2">
                      Кръг {round}
                    </div>
                    <div className="grid gap-3">
                      {answers
                        .sort((a, b) => a.question - b.question)
                        .map((answer, index) => (
                          <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.1 }}
                            key={answer.question}
                            className="bg-white rounded-xl p-3 shadow-sm border border-amber-100/50 hover:shadow-md transition-shadow"
                          >
                            <div className="flex items-center gap-3">
                              <div className="bg-gradient-to-br from-amber-500 to-orange-500 text-white w-8 h-8 rounded-lg flex items-center justify-center font-bold text-sm shrink-0">
                                {answer.question}
                              </div>
                              <div className="flex-1 min-w-0">
                                <p className={`font-semibold text-amber-900 ${answer.round === 1 ? 'text-xl' : 'text-base'} ${answer.round === 1 ? 'tracking-wider' : ''}`}>
                                  {answer.answer}
                                </p>
                              </div>
                            </div>
                          </motion.div>
                        ))}
                    </div>
                  </div>
                ))
            )}
          </div>
        </motion.div>
      </motion.div>
    </Portal>
  );
}