import React from 'react';
import { motion } from 'framer-motion';
import { WifiOff, RefreshCw, LogOut, Loader2 } from 'lucide-react';

interface DisconnectedScreenProps {
  playerName: string;
  gamePin: string;
  isReconnecting: boolean;
  onReconnect: () => void;
  onGoHome: () => void;
}

export const DisconnectedScreen: React.FC<DisconnectedScreenProps> = ({
  playerName,
  gamePin,
  isReconnecting,
  onReconnect,
  onGoHome,
}) => {
  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-md w-full"
      >
        <motion.div
          animate={{ y: [0, -10, 0] }}
          transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
          className="bg-orange-500 p-6 rounded-full inline-block mb-6 shadow-lg"
        >
          <WifiOff size={48} className="text-white" />
        </motion.div>

        <h1 className="text-4xl font-black font-display mb-4">Connection Lost</h1>
        
        <p className="text-xl opacity-80 mb-2">
          Hey <span className="font-bold text-yellow-300">{playerName}</span>!
        </p>
        <p className="text-lg opacity-70 mb-8">
          You got disconnected from game <span className="font-mono font-bold">{gamePin}</span>
        </p>

        <div className="space-y-4">
          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={onReconnect}
            disabled={isReconnecting}
            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 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-3"
          >
            {isReconnecting ? (
              <>
                <Loader2 size={24} className="animate-spin" />
                Reconnecting...
              </>
            ) : (
              <>
                <RefreshCw size={24} />
                Reconnect
              </>
            )}
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={onGoHome}
            disabled={isReconnecting}
            className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-xl font-bold hover:bg-white/30 transition-all disabled:opacity-50 flex items-center justify-center gap-3"
          >
            <LogOut size={24} />
            Abandon Game
          </motion.button>
        </div>

        <p className="text-sm opacity-50 mt-8">
          Your score will be preserved if you reconnect
        </p>
      </motion.div>
    </div>
  );
};