import React from 'react';
import { motion } from 'framer-motion';
import { Play, Users, X } from 'lucide-react';

interface HostReconnectedProps {
  quizTitle: string;
  currentQuestionIndex: number;
  totalQuestions: number;
  playerCount: number;
  onResume: () => void;
  onEndGame: () => void;
}

export const HostReconnected: React.FC<HostReconnectedProps> = ({
  quizTitle,
  currentQuestionIndex,
  totalQuestions,
  playerCount,
  onResume,
  onEndGame,
}) => {
  return (
    <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
      <motion.div
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-lg w-full"
      >
        <motion.div
          initial={{ rotate: -10 }}
          animate={{ rotate: 0 }}
          className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
        >
          <Play size={48} className="text-white ml-1" />
        </motion.div>

        <h1 className="text-3xl font-black font-display mb-2">Game Restored</h1>
        <p className="text-xl opacity-80 mb-6">{quizTitle}</p>
        
        <div className="grid grid-cols-2 gap-4 mb-8">
          <div className="bg-white/10 rounded-2xl p-4">
            <p className="text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
            <p className="text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
          </div>
          <div className="bg-white/10 rounded-2xl p-4">
            <p className="text-sm uppercase tracking-wide opacity-70 mb-1">Players</p>
            <p className="text-3xl font-black flex items-center justify-center gap-2">
              <Users size={24} />
              {playerCount}
            </p>
          </div>
        </div>

        <p className="text-sm opacity-60 mb-6">
          Players will rejoin automatically when they reconnect
        </p>

        <div className="space-y-3">
          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={onResume}
            className="w-full bg-white text-theme-primary px-8 py-4 rounded-full text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] hover:shadow-[0_4px_0_rgba(0,0,0,0.2)] hover:translate-y-[2px] active:shadow-none active:translate-y-[6px] transition-all flex items-center justify-center gap-3"
          >
            <Play size={24} />
            Resume Game
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={onEndGame}
            className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2"
          >
            <X size={20} />
            End Game
          </motion.button>
        </div>
      </motion.div>
    </div>
  );
};