import React from 'react';
import { Player } from '../types';
import { motion, AnimatePresence } from 'framer-motion';
import { Sparkles, User } from 'lucide-react';
import { PlayerAvatar } from './PlayerAvatar';

interface LobbyProps {
  quizTitle: string;
  players: Player[];
  gamePin: string | null;
  role: 'HOST' | 'CLIENT';
  onStart: () => void;
}

export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart }) => {
  const isHost = role === 'HOST';
  const realPlayers = players.filter(p => p.id !== 'host');

  return (
    <div className="flex flex-col min-h-screen p-6">
      <header className="flex flex-col md:flex-row justify-between items-center bg-white/10 p-6 rounded-[2rem] backdrop-blur-md mb-8 gap-6 border-4 border-white/20 shadow-xl">
        <div className="flex flex-col items-center md:items-start">
            <span className="text-white/80 font-bold uppercase tracking-widest text-sm mb-1">Game PIN</span>
            <div className="text-5xl md:text-6xl font-black bg-white text-theme-primary px-8 py-2 rounded-full shadow-[0_6px_0_rgba(0,0,0,0.2)] tracking-wider">
                {gamePin}
            </div>
        </div>
        
        <div className="text-center">
            <div className="text-3xl font-black font-display mb-2">{quizTitle}</div>
            <div className="inline-flex items-center gap-2 bg-[#00000040] px-4 py-1 rounded-full">
                <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                <span className="font-bold">Live Lobby</span>
            </div>
        </div>
        
        <div className="bg-white/20 px-6 py-3 rounded-2xl font-black text-2xl flex flex-col items-center min-w-[120px]">
            <span>{realPlayers.length}</span>
            <span className="text-sm font-bold opacity-80 uppercase">Players</span>
        </div>
      </header>

      <main className="flex-1 flex flex-col items-center justify-center">
        {isHost ? (
            <>
                <div className="flex flex-wrap gap-4 justify-center w-full max-w-6xl mb-12 min-h-[200px] content-start">
                <AnimatePresence>
                    {realPlayers.length === 0 && (
                        <div className="flex flex-col items-center opacity-60 mt-12">
                            <div className="bg-white/10 p-6 rounded-full mb-4 animate-bounce">
                                <Sparkles size={48} />
                            </div>
                            <div className="text-3xl font-bold font-display">Waiting for players to join...</div>
                        </div>
                    )}
                    {realPlayers.map((player) => (
                    <motion.div
                        key={player.id}
                        initial={{ scale: 0, rotate: -10 }}
                        animate={{ scale: 1, rotate: 0 }}
                        exit={{ scale: 0, opacity: 0 }}
                        className="bg-white text-black px-6 py-3 rounded-full font-black text-xl shadow-[0_4px_0_rgba(0,0,0,0.2)] flex items-center gap-3 border-b-4 border-gray-200"
                    >
                        <PlayerAvatar seed={player.avatarSeed} size={20} />
                        {player.name}
                    </motion.div>
                    ))}
                </AnimatePresence>
                </div>

                <motion.div 
                    initial={{ y: 50, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    className="fixed bottom-8"
                >
                    <button
                        onClick={onStart}
                        disabled={realPlayers.length === 0}
                        className="bg-white text-theme-primary px-16 py-5 rounded-full text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
                    >
                        Start Game
                    </button>
                </motion.div>
            </>
        ) : (
            <div className="flex flex-col items-center justify-center h-full text-center p-8">
                <motion.div 
                    initial={{ scale: 0.5 }}
                    animate={{ scale: 1 }}
                    transition={{ type: 'spring', bounce: 0.6 }}
                    className="bg-white text-theme-primary p-8 rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] mb-8"
                >
                    <User size={80} strokeWidth={2.5} />
                </motion.div>
                <h2 className="text-5xl font-black mb-4 font-display">You're in!</h2>
                <p className="text-2xl font-bold opacity-80">See your name on the big screen?</p>
            </div>
        )}
      </main>
    </div>
  );
};