import ReactPlayer from 'react-player';
import { motion } from 'framer-motion';
import { User, Mic, MicOff } from 'lucide-react';

const VideoPlayer = ({ stream, isAudioMute, name }) => {
    const isMyStream = name === "My Stream";
    
    return (
        <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5 }}
            className={`relative ${isMyStream 
                ? "absolute top-4 right-4 z-20 w-32 md:w-48 lg:w-64" 
                : "w-full max-w-4xl mx-auto"
            }`}
        >
            {/* Name Badge */}
            <div className={`absolute top-2 left-2 z-30 flex items-center space-x-2 px-3 py-1 rounded-full bg-black/50 backdrop-blur-sm text-white text-xs font-medium ${
                isMyStream ? "scale-75" : ""
            }`}>
                <User className="h-3 w-3" />
                <span>{name}</span>
                {isAudioMute ? (
                    <MicOff className="h-3 w-3 text-red-400" />
                ) : (
                    <Mic className="h-3 w-3 text-green-400" />
                )}
            </div>

            {/* Video Container */}
            <div className={`relative overflow-hidden rounded-2xl shadow-2xl border-2 border-white/20 ${
                isMyStream 
                    ? "aspect-[3/4] bg-gradient-to-br from-gray-900 to-gray-800" 
                    : "aspect-video bg-gradient-to-br from-gray-900 to-gray-800"
            }`}>
                {stream ? (
                    <ReactPlayer
                        url={stream}
                        playing
                        muted={isMyStream ? true : isAudioMute}
                        height="100%"
                        width="100%"
                        style={{ 
                            transform: 'scaleX(-1)',
                        }}
                        config={{
                            file: {
                                attributes: {
                                    style: {
                                        width: '100%',
                                        height: '100%',
                                        objectFit: 'cover'
                                    }
                                }
                            }
                        }}
                    />
                ) : (
                    <div className="w-full h-full flex items-center justify-center">
                        <div className="text-center text-white/60">
                            <User className="h-16 w-16 mx-auto mb-2 opacity-40" />
                            <p className="text-sm">Camera not available</p>
                        </div>
                    </div>
                )}

                {/* Overlay for connection status */}
                {!stream && (
                    <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
                        <div className="text-center text-white">
                            <div className="animate-pulse">
                                <User className="h-12 w-12 mx-auto mb-2" />
                                <p className="text-sm font-medium">Connecting...</p>
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* Glow effect for my stream */}
            {isMyStream && (
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-indigo-400 to-purple-400 opacity-20 blur-xl -z-10"></div>
            )}
        </motion.div>
    );
};

export default VideoPlayer;