window.ProfileModal = ({ isOpen, onClose, user, onUpdate, isDark }) => {
    const [displayName, setDisplayName] = React.useState('');
    const [photoURL, setPhotoURL] = React.useState('');
    const [saving, setSaving] = React.useState(false);

    // মডাল ওপেন হলে কারেন্ট ডাটা লোড করবে
    React.useEffect(() => {
        if (user) {
            setDisplayName(user.displayName || '');
            setPhotoURL(user.photoURL || '');
        }
    }, [user, isOpen]);

    if (!isOpen || !user) return null;

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSaving(true);
        // অ্যাপ থেকে পাঠানো আপডেট ফাংশন কল করবে
        await onUpdate(displayName, photoURL);
        setSaving(false);
        onClose();
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-[fadeIn_0.2s_ease-out]">
            {/* Backdrop */}
            <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose}></div>

            {/* Modal Card */}
            <div className={`relative w-full max-w-md rounded-2xl shadow-2xl overflow-hidden flex flex-col
                ${isDark ? 'bg-[#0a0a0a] border border-white/10 text-white' : 'bg-white text-slate-800'}
            `}>
                {/* Header */}
                <div className={`flex justify-between items-center p-6 border-b ${isDark ? 'border-white/5 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                    <h3 className="font-bold text-lg flex items-center gap-2">
                        <i className="fa-solid fa-user-pen text-blue-500"></i> Edit Profile
                    </h3>
                    <button onClick={onClose} className={`w-8 h-8 rounded-full flex items-center justify-center transition ${isDark ? 'bg-white/5 hover:bg-red-500/20 text-gray-400' : 'bg-slate-200 hover:bg-red-100 text-slate-600'}`}>
                        <i className="fa-solid fa-xmark"></i>
                    </button>
                </div>

                {/* Body */}
                <form onSubmit={handleSubmit} className="p-6 space-y-6">
                    
                    {/* Avatar Preview */}
                    <div className="flex justify-center">
                        <div className="relative group">
                            <div className={`w-24 h-24 rounded-full overflow-hidden border-4 shadow-lg
                                ${isDark ? 'border-[#1a1a1a]' : 'border-white'}
                            `}>
                                <img 
                                    src={photoURL || "https://ui-avatars.com/api/?name=" + (displayName || 'User')} 
                                    alt="Profile" 
                                    className="w-full h-full object-cover"
                                    onError={(e) => e.target.src = "https://ui-avatars.com/api/?name=User"}
                                />
                            </div>
                            <div className="absolute bottom-0 right-0 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white border-2 border-black shadow-sm">
                                <i className="fa-solid fa-camera text-xs"></i>
                            </div>
                        </div>
                    </div>

                    {/* Inputs */}
                    <div className="space-y-4">
                        <div className="space-y-1">
                            <label className="text-xs font-bold uppercase tracking-wider opacity-70">Display Name</label>
                            <input 
                                type="text" 
                                placeholder="Enter your name"
                                value={displayName}
                                onChange={(e) => setDisplayName(e.target.value)}
                                className={`w-full px-4 py-3 rounded-xl border outline-none transition-all
                                    ${isDark 
                                        ? 'bg-[#111] border-white/10 focus:border-blue-500 text-white' 
                                        : 'bg-slate-50 border-slate-200 focus:border-blue-500 text-slate-900'}
                                `}
                            />
                        </div>

                        <div className="space-y-1">
                            <label className="text-xs font-bold uppercase tracking-wider opacity-70">Photo URL</label>
                            <input 
                                type="url" 
                                placeholder="https://example.com/photo.jpg"
                                value={photoURL}
                                onChange={(e) => setPhotoURL(e.target.value)}
                                className={`w-full px-4 py-3 rounded-xl border outline-none transition-all
                                    ${isDark 
                                        ? 'bg-[#111] border-white/10 focus:border-blue-500 text-white' 
                                        : 'bg-slate-50 border-slate-200 focus:border-blue-500 text-slate-900'}
                                `}
                            />
                            <p className="text-[10px] opacity-50">Paste a direct link to an image (imgur, etc.)</p>
                        </div>
                    </div>

                    {/* Footer Actions */}
                    <button 
                        type="submit" 
                        disabled={saving}
                        className={`w-full py-3.5 rounded-xl font-bold text-sm text-white shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2
                            ${saving ? 'opacity-70 cursor-not-allowed' : 'hover:scale-[1.02]'}
                            bg-gradient-to-r from-blue-600 to-indigo-600 hover:shadow-blue-500/30
                        `}
                    >
                        {saving ? <i className="fa-solid fa-circle-notch animate-spin"></i> : <i className="fa-regular fa-floppy-disk"></i>}
                        {saving ? 'Saving Changes...' : 'Save Profile'}
                    </button>
                </form>
            </div>
        </div>
    );
};