kaboot/components/HostReconnected.tsx

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Play, Users, X, Wifi, WifiOff } from 'lucide-react';
import { Player } from '../types';
import { PlayerAvatar } from './PlayerAvatar';

interface HostReconnectedProps {
  quizTitle: string;
  currentQuestionIndex: number;
  totalQuestions: number;
  players: Player[];
  onResume: () => void;
  onEndGame: () => void;
  connectedPlayerIds: string[];
}

export const HostReconnected: React.FC<HostReconnectedProps> = ({
  quizTitle,
  currentQuestionIndex,
  totalQuestions,
  players,
  onResume,
  onEndGame,
  connectedPlayerIds,
}) => {
  const realPlayers = players.filter(p => p.id !== 'host');
  const connectedCount = connectedPlayerIds.length;
  const totalCount = realPlayers.length;

  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-6 md:p-10 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-4 md:p-6 rounded-full inline-block mb-4 md:mb-6 shadow-lg"
        >
          <Play size={36} className="text-white ml-1 md:w-12 md:h-12" />
        </motion.div>

        <h1 className="text-2xl md:text-3xl font-black font-display mb-1 md:mb-2">Game Restored</h1>
        <p className="text-base md:text-xl opacity-80 mb-4 md:mb-6">{quizTitle}</p>
        
        <div className="grid grid-cols-2 gap-3 md:gap-4 mb-4 md:mb-6">
          <div className="bg-white/10 rounded-2xl p-3 md:p-4">
            <p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
            <p className="text-2xl md:text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
          </div>
          <div className="bg-white/10 rounded-2xl p-3 md:p-4">
            <p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Connected</p>
            <p className="text-2xl md:text-3xl font-black flex items-center justify-center gap-2">
              <Users size={20} className="md:w-6 md:h-6" />
              {connectedCount} / {totalCount}
            </p>
          </div>
        </div>

        {/* Player list showing connection status */}
        {realPlayers.length > 0 && (
          <div className="bg-black/20 rounded-xl p-3 mb-4 md:mb-6 max-h-32 md:max-h-40 overflow-y-auto">
            <div className="flex flex-wrap gap-2 justify-center">
              <AnimatePresence>
                {realPlayers.map((player) => {
                  const isConnected = connectedPlayerIds.includes(player.id);
                  return (
                    <motion.div
                      key={player.id}
                      initial={{ scale: 0, opacity: 0 }}
                      animate={{ scale: 1, opacity: 1 }}
                      className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-sm font-bold ${
                        isConnected 
                          ? 'bg-green-500/30 text-green-200' 
                          : 'bg-white/10 text-white/50'
                      }`}
                    >
                      {isConnected ? (
                        <Wifi size={12} className="text-green-400" />
                      ) : (
                        <WifiOff size={12} className="text-white/40" />
                      )}
                      <PlayerAvatar seed={player.avatarSeed} size={16} />
                      <span className="max-w-[80px] truncate">{player.name}</span>
                    </motion.div>
                  );
                })}
              </AnimatePresence>
            </div>
          </div>
        )}

        <p className="text-xs md:text-sm opacity-60 mb-4 md: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-6 md:px-8 py-3 md:py-4 rounded-full text-lg md: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-6 md:px-8 py-3 md:py-4 rounded-full text-base md: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>
  );
};