import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import {
    getAuth,
    signInAnonymously,
    onAuthStateChanged,
    signInWithCustomToken
} from 'firebase/auth';
import {
    getFirestore,
    collection,
    addDoc,
    query,
    // orderBy, // We will sort in client for DMs due to composite query needs
    onSnapshot,
    serverTimestamp,
    doc,
    setDoc,
    getDoc,
    Timestamp,
    where,
    getDocs,
    orderBy // Keep for channel messages and initial channel list
} from 'firebase/firestore';
import { setLogLevel } from 'firebase/app';

// --- Icon Components ---
const HashIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <line x1="4" y1="9" x2="20" y2="9"></line>
        <line x1="4" y1="15" x2="20" y2="15"></line>
        <line x1="10" y1="3" x2="8" y2="21"></line>
        <line x1="16" y1="3" x2="14" y2="21"></line>
    </svg>
);

const PlusIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
);

const SendIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-blue-500 hover:text-blue-400">
        <line x1="22" y1="2" x2="11" y2="13"></line>
        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
    </svg>
);

const UsersIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
    </svg>
);

const MessageSquareIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
    </svg>
);
// --- End Icon Components ---


// --- Firebase Configuration ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-chat-app-dm';

// Initialize Firebase
let app;
let auth;
let db;

try {
    app = initializeApp(firebaseConfig);
    auth = getAuth(app);
    db = getFirestore(app);
    setLogLevel('debug');
} catch (error) {
    console.error("Error initializing Firebase:", error);
}


const App = () => {
    const [currentUser, setCurrentUser] = useState(null);
    const [userId, setUserId] = useState(null);
    const [userName, setUserName] = useState('');
    const [isUserNameSet, setIsUserNameSet] = useState(false);
    const [tempUserName, setTempUserName] = useState('');

    // Group Channels state
    const [channels, setChannels] = useState([]);
    const [selectedChannelId, setSelectedChannelId] = useState(null);
    const [selectedChannelName, setSelectedChannelName] = useState('');
    const [newChannelName, setNewChannelName] = useState('');

    // Direct Messages (DM) state
    const [allUsers, setAllUsers] = useState([]); // For starting new DMs
    const [dmConversations, setDmConversations] = useState([]); // Active DM conversations
    const [selectedDmConversationId, setSelectedDmConversationId] = useState(null);
    const [selectedDmPeer, setSelectedDmPeer] = useState(null); // { id: string, name: string }
    const [showUserListModal, setShowUserListModal] = useState(false);

    // Common state
    const [messages, setMessages] = useState([]);
    const [newMessage, setNewMessage] = useState('');
    const [chatMode, setChatMode] = useState('channel'); // 'channel' or 'dm'

    const [isLoadingChannels, setIsLoadingChannels] = useState(true);
    const [isLoadingMessages, setIsLoadingMessages] = useState(false);
    const [isLoadingUsers, setIsLoadingUsers] = useState(false);
    const [isLoadingDms, setIsLoadingDms] = useState(false);
    const [error, setError] = useState(null);

    const messagesEndRef = useRef(null);

    // Firestore Paths
    const CHANNELS_PATH = `artifacts/${appId}/public/data/chat_channels`;
    const USER_PROFILES_PATH = `artifacts/${appId}/public/data/user_profiles`;
    const DM_CONVERSATIONS_PATH = `artifacts/${appId}/public/data/dm_conversations`;

    const getGroupChannelMessagesPath = (channelId) => `artifacts/${appId}/public/data/chat_channels/${channelId}/messages`;
    const getDmMessagesPath = (dmConversationId) => `artifacts/${appId}/public/data/dm_conversations/${dmConversationId}/messages`;

    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    };

    useEffect(() => { scrollToBottom(); }, [messages]);

    // --- Auth and User Profile ---
    useEffect(() => {
        if (!auth) { setError("Firebase Auth not initialized."); return; }
        const unsubscribe = onAuthStateChanged(auth, async (user) => {
            if (user) {
                setCurrentUser(user);
                const uId = user.uid;
                setUserId(uId);
                console.log("User authenticated with UID:", uId);
                try {
                    const userProfileRef = doc(db, USER_PROFILES_PATH, uId);
                    const docSnap = await getDoc(userProfileRef);
                    if (docSnap.exists() && docSnap.data().displayName) {
                        setUserName(docSnap.data().displayName);
                        setIsUserNameSet(true);
                        console.log("Username loaded:", docSnap.data().displayName);
                    } else {
                        setIsUserNameSet(false);
                        console.log("No user profile/displayName found for UID:", uId, "Prompting.");
                    }
                } catch (e) {
                    console.error("Error fetching user profile:", e);
                    setError("Error fetching user profile.");
                    setIsUserNameSet(false);
                }
            } else {
                setCurrentUser(null); setUserId(null); setUserName(''); setIsUserNameSet(false);
                console.log("User not authenticated, attempting to sign in.");
                try {
                    if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                        await signInWithCustomToken(auth, __initial_auth_token);
                    } else {
                        await signInAnonymously(auth);
                    }
                } catch (e) { console.error("Error during sign-in:", e); setError("Failed to sign in."); }
            }
        });
        return () => unsubscribe();
    }, []);

    const handleSetUserName = async () => {
        if (tempUserName.trim() && userId && db) {
            try {
                const userProfileRef = doc(db, USER_PROFILES_PATH, userId);
                await setDoc(userProfileRef, { displayName: tempUserName.trim(), uid: userId }, { merge: true });
                setUserName(tempUserName.trim());
                setIsUserNameSet(true);
                setTempUserName('');
                setError(null);
            } catch (e) { console.error("Error saving username:", e); setError("Failed to save username."); }
        } else { setError("Display name cannot be empty or user/db not ready."); }
    };

    // --- Fetch Group Channels ---
    useEffect(() => {
        if (!db || !isUserNameSet) { setIsLoadingChannels(!!isUserNameSet); return; }
        setIsLoadingChannels(true);
        const q = query(collection(db, CHANNELS_PATH), orderBy("createdAt", "asc"));
        const unsubscribe = onSnapshot(q, (snapshot) => {
            const channelsData = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
            setChannels(channelsData);
            setIsLoadingChannels(false);
            if (channelsData.length > 0 && !selectedChannelId && !selectedDmConversationId) { // Default to first channel if nothing else selected
                setSelectedChannelId(channelsData[0].id);
                setSelectedChannelName(channelsData[0].name);
                setChatMode('channel');
            } else if (channelsData.length === 0 && !selectedDmConversationId) {
                setSelectedChannelId(null); setSelectedChannelName('');
            }
        }, (err) => { console.error("Error fetching channels:", err); setError("Failed to load channels."); setIsLoadingChannels(false); });
        return () => unsubscribe();
    }, [db, isUserNameSet]);

    // --- Fetch All Users (for starting DMs) ---
    useEffect(() => {
        if (!db || !isUserNameSet) { setIsLoadingUsers(!!isUserNameSet); return; }
        setIsLoadingUsers(true);
        const usersCollectionRef = collection(db, USER_PROFILES_PATH);
        const unsubscribe = onSnapshot(usersCollectionRef, (snapshot) => {
            const usersData = snapshot.docs
                .map(d => ({ id: d.id, ...d.data() }))
                .filter(u => u.id !== userId && u.displayName); // Exclude self and users without display names
            setAllUsers(usersData);
            setIsLoadingUsers(false);
        }, (err) => { console.error("Error fetching users:", err); setError("Failed to load users."); setIsLoadingUsers(false); });
        return () => unsubscribe();
    }, [db, userId, isUserNameSet]);

    // --- Fetch DM Conversations ---
    useEffect(() => {
        if (!db || !userId || !isUserNameSet) { setIsLoadingDms(!!(userId && isUserNameSet)); return; }
        setIsLoadingDms(true);
        const dmQuery = query(collection(db, DM_CONVERSATIONS_PATH), where("participants", "array-contains", userId));
        
        const unsubscribe = onSnapshot(dmQuery, async (snapshot) => {
            const convosData = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
            // Enhance with peer information
            const enhancedConvos = await Promise.all(convosData.map(async (convo) => {
                const peerId = convo.participants.find(pId => pId !== userId);
                if (!peerId) return { ...convo, peerName: "Unknown User", peerId: null };
                
                let peerName = "Loading...";
                // Try to get peer name from convo document first
                if (convo.participantNames && convo.participantNames[peerId]) {
                    peerName = convo.participantNames[peerId];
                } else { // Fallback to fetching profile
                    try {
                        const userProfileRef = doc(db, USER_PROFILES_PATH, peerId);
                        const docSnap = await getDoc(userProfileRef);
                        if (docSnap.exists() && docSnap.data().displayName) {
                            peerName = docSnap.data().displayName;
                        } else {
                            peerName = "Unknown User";
                        }
                    } catch (e) {
                        console.warn("Could not fetch peer profile for DM list:", peerId, e);
                        peerName = "Unknown User";
                    }
                }
                return { ...convo, peerName, peerId };
            }));
            
            // Sort by lastMessageAt (client-side as Firestore multiple array-contains + orderBy is tricky)
            enhancedConvos.sort((a, b) => {
                const timeA = a.lastMessageAt ? (a.lastMessageAt.seconds || 0) : 0;
                const timeB = b.lastMessageAt ? (b.lastMessageAt.seconds || 0) : 0;
                return timeB - timeA; // Descending
            });

            setDmConversations(enhancedConvos);
            setIsLoadingDms(false);
        }, (err) => { console.error("Error fetching DMs:", err); setError("Failed to load DMs."); setIsLoadingDms(false); });
        return () => unsubscribe();
    }, [db, userId, isUserNameSet]);


    // --- Fetch Messages (for selected channel OR DM) ---
    useEffect(() => {
        if (!db || !isUserNameSet || (!selectedChannelId && !selectedDmConversationId)) {
            setMessages([]);
            setIsLoadingMessages(false);
            return;
        }
        setIsLoadingMessages(true);
        let messagesPath;
        if (chatMode === 'channel' && selectedChannelId) {
            messagesPath = getGroupChannelMessagesPath(selectedChannelId);
        } else if (chatMode === 'dm' && selectedDmConversationId) {
            messagesPath = getDmMessagesPath(selectedDmConversationId);
        } else {
            setIsLoadingMessages(false);
            return;
        }

        const q = query(collection(db, messagesPath), orderBy("timestamp", "asc"));
        const unsubscribe = onSnapshot(q, (snapshot) => {
            setMessages(snapshot.docs.map(d => ({ id: d.id, ...d.data() })));
            setIsLoadingMessages(false);
            scrollToBottom();
        }, (err) => {
            console.error(`Error fetching messages for ${messagesPath}:`, err);
            setError(`Failed to load messages.`);
            setIsLoadingMessages(false);
        });
        return () => unsubscribe();
    }, [db, selectedChannelId, selectedDmConversationId, chatMode, isUserNameSet]);

    // --- Actions ---
    const handleCreateChannel = async () => {
        if (newChannelName.trim() === '' || !db || !userId) { setError("Channel name/user/db issue."); return; }
        try {
            const addedDoc = await addDoc(collection(db, CHANNELS_PATH), {
                name: newChannelName.trim(), createdBy: userId, creatorName: userName, createdAt: serverTimestamp()
            });
            setNewChannelName('');
            // Select the new channel
            setSelectedChannelId(addedDoc.id);
            setSelectedChannelName(newChannelName.trim());
            setChatMode('channel');
            setSelectedDmConversationId(null);
            setSelectedDmPeer(null);
            setError(null);
        } catch (e) { console.error("Error creating channel:", e); setError("Failed to create channel."); }
    };

    const generateDmConversationId = (uid1, uid2) => [uid1, uid2].sort().join('_');

    const handleStartOrSelectDm = async (peerUser) => {
        if (!userId || !userName || !db || !peerUser || !peerUser.id || !peerUser.displayName) {
            setError("Cannot start DM: Missing user information.");
            return;
        }
        const dmId = generateDmConversationId(userId, peerUser.id);
        const dmRef = doc(db, DM_CONVERSATIONS_PATH, dmId);

        try {
            const dmSnap = await getDoc(dmRef);
            if (!dmSnap.exists()) {
                await setDoc(dmRef, {
                    participants: [userId, peerUser.id],
                    participantNames: {
                        [userId]: userName,
                        [peerUser.id]: peerUser.displayName
                    },
                    createdAt: serverTimestamp(),
                    lastMessageAt: serverTimestamp() // Initialize for sorting
                });
                console.log("Created new DM conversation:", dmId);
            }
            
            setSelectedDmConversationId(dmId);
            setSelectedDmPeer({ id: peerUser.id, name: peerUser.displayName });
            setChatMode('dm');
            setSelectedChannelId(null); // Clear group channel selection
            setSelectedChannelName('');
            setShowUserListModal(false); // Close modal if open
            setError(null);

        } catch (e) {
            console.error("Error starting/selecting DM:", e);
            setError("Failed to start DM conversation.");
        }
    };
    
    const handleSendMessage = async () => {
        if (newMessage.trim() === '' || !db || !userId || !userName) { setError("Message empty or user/db issue."); return; }
        
        let messagePayload = {
            text: newMessage.trim(), userId: userId, userName: userName, timestamp: serverTimestamp()
        };
        let targetPath;
        let conversationRefToUpdate; // For lastMessageAt

        if (chatMode === 'channel' && selectedChannelId) {
            targetPath = getGroupChannelMessagesPath(selectedChannelId);
            // Optionally update channel's last message time if needed for sorting channels (not implemented here)
        } else if (chatMode === 'dm' && selectedDmConversationId) {
            targetPath = getDmMessagesPath(selectedDmConversationId);
            conversationRefToUpdate = doc(db, DM_CONVERSATIONS_PATH, selectedDmConversationId);
        } else {
            setError("No active channel or DM selected."); return;
        }

        try {
            await addDoc(collection(db, targetPath), messagePayload);
            if (conversationRefToUpdate) { // Update lastMessageAt for DM conversation
                await setDoc(conversationRefToUpdate, { lastMessageAt: serverTimestamp() }, { merge: true });
            }
            setNewMessage('');
            setError(null);
            scrollToBottom();
        } catch (e) { console.error("Error sending message:", e); setError("Failed to send message."); }
    };

    const formatTimestamp = (firebaseTimestamp) => {
        if (!firebaseTimestamp) return 'Sending...';
        let date;
        if (firebaseTimestamp instanceof Timestamp) date = firebaseTimestamp.toDate();
        else if (firebaseTimestamp.seconds) date = new Date(firebaseTimestamp.seconds * 1000 + (firebaseTimestamp.nanoseconds || 0) / 1000000);
        else return 'Invalid date';
        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    };


    // --- Render Logic ---
    if (!userId) return <div className="flex items-center justify-center h-screen bg-gray-800 text-white"><div className="p-6 rounded-lg shadow-xl bg-gray-700"><h2 className="text-2xl font-semibold mb-4">Initializing Chat...</h2><p>Attempting to sign you in...</p>{error && <p className="text-red-400 mt-2">{error}</p>}</div></div>;
    if (!isUserNameSet) return <div className="flex items-center justify-center h-screen bg-gray-800 text-white"><div className="p-8 rounded-lg shadow-xl bg-gray-700 w-full max-w-md"><h2 className="text-2xl font-semibold mb-6">Set Display Name</h2><input type="text" value={tempUserName} onChange={(e) => setTempUserName(e.target.value)} placeholder="Enter display name" className="w-full p-3 mb-4 bg-gray-600 border border-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" onKeyPress={(e) => e.key === 'Enter' && handleSetUserName()} /><button onClick={handleSetUserName} className="w-full bg-blue-600 hover:bg-blue-700 p-3 rounded-md">Set Name</button>{error && <p className="text-red-400 mt-4">{error}</p>}<p className="text-xs text-gray-400 mt-4">User ID: {userId}</p></div></div>;

    let currentChatName = "Select a conversation";
    if (chatMode === 'channel' && selectedChannelName) currentChatName = selectedChannelName;
    if (chatMode === 'dm' && selectedDmPeer) currentChatName = selectedDmPeer.name;
    
    let placeholderText = "Message";
    if (chatMode === 'channel' && selectedChannelName) placeholderText = `Message #${selectedChannelName}`;
    if (chatMode === 'dm' && selectedDmPeer) placeholderText = `Message ${selectedDmPeer.name}`;


    return (
        <div className="flex h-screen font-sans bg-gray-800 text-gray-100">
            {/* Sidebar */}
            <div className="w-1/3 lg:w-1/4 bg-gray-900 p-4 border-r border-gray-700 flex flex-col space-y-4">
                <div>
                    <h2 className="text-xl font-semibold mb-1">Chat App</h2>
                    <p className="text-xs text-gray-400">User: <span className="font-semibold">{userName}</span> ({userId.substring(0,8)})</p>
                </div>

                {/* Create Channel */}
                <div className="border-t border-gray-700 pt-4">
                    <h3 className="text-sm font-semibold text-gray-400 mb-2 px-1">CHANNELS</h3>
                    <input type="text" value={newChannelName} onChange={(e) => setNewChannelName(e.target.value)} placeholder="New channel name" className="w-full p-2 mb-2 bg-gray-700 border border-gray-600 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" />
                    <button onClick={handleCreateChannel} disabled={!newChannelName.trim()} className="w-full flex items-center justify-center bg-green-600 hover:bg-green-700 text-white font-semibold p-2 rounded-md text-sm transition duration-150 disabled:opacity-50">
                        <PlusIcon /> <span className="ml-1">Create Channel</span>
                    </button>
                </div>

                {/* Channel List */}
                <div className="flex-grow overflow-y-auto pr-1 space-y-1">
                    {isLoadingChannels ? <p className="text-gray-400 text-xs">Loading channels...</p> : channels.length === 0 ? <p className="text-gray-400 text-xs px-1">No channels yet.</p> : channels.map(channel => (
                        <div key={channel.id} onClick={() => { setSelectedChannelId(channel.id); setSelectedChannelName(channel.name); setChatMode('channel'); setSelectedDmConversationId(null); setSelectedDmPeer(null); }}
                            className={`flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-700 ${chatMode === 'channel' && selectedChannelId === channel.id ? 'bg-blue-600 font-semibold' : 'bg-gray-800'}`}>
                            <HashIcon /> <span className="ml-2 text-sm">{channel.name}</span>
                        </div>
                    ))}
                </div>

                {/* Direct Messages */}
                <div className="border-t border-gray-700 pt-4">
                     <div className="flex justify-between items-center mb-2 px-1">
                        <h3 className="text-sm font-semibold text-gray-400">DIRECT MESSAGES</h3>
                        <button onClick={() => setShowUserListModal(true)} className="p-1 hover:bg-gray-700 rounded">
                            <PlusIcon />
                        </button>
                    </div>
                    <div className="flex-grow overflow-y-auto pr-1 space-y-1 max-h-48"> {/* Max height for DM list */}
                        {isLoadingDms ? <p className="text-gray-400 text-xs">Loading DMs...</p> : dmConversations.length === 0 ? <p className="text-gray-400 text-xs px-1">No DMs yet.</p> : dmConversations.map(dm => (
                            <div key={dm.id} onClick={() => { setSelectedDmConversationId(dm.id); setSelectedDmPeer({id: dm.peerId, name: dm.peerName}); setChatMode('dm'); setSelectedChannelId(null); setSelectedChannelName('');}}
                                className={`flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-700 ${chatMode === 'dm' && selectedDmConversationId === dm.id ? 'bg-blue-600 font-semibold' : 'bg-gray-800'}`}>
                                <MessageSquareIcon /> 
                                <span className="ml-2 text-sm">{dm.peerName || "DM Conversation"}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* Main Chat Area */}
            <div className="flex-1 flex flex-col bg-gray-700">
                {(selectedChannelId || selectedDmConversationId) ? (
                    <>
                        <header className="bg-gray-800 p-4 border-b border-gray-600 shadow-md">
                            <h2 className="text-xl font-semibold flex items-center">
                                {chatMode === 'channel' ? <HashIcon /> : <MessageSquareIcon />}
                                <span className="ml-2">{currentChatName}</span>
                            </h2>
                        </header>
                        <div className="flex-1 p-4 overflow-y-auto space-y-3">
                            {isLoadingMessages ? <p>Loading messages...</p> : messages.length === 0 ? <p className="text-gray-400 text-center">No messages yet.</p> : messages.map(msg => (
                                <div key={msg.id} className={`flex ${msg.userId === userId ? 'justify-end' : 'justify-start'}`}>
                                    <div className={`max-w-lg p-3 rounded-lg shadow ${msg.userId === userId ? 'bg-blue-600' : 'bg-gray-600'}`}>
                                        {msg.userId !== userId && <p className="text-xs font-semibold text-indigo-300 mb-1">{msg.userName || "User"}</p>}
                                        <p className="text-sm whitespace-pre-wrap">{msg.text}</p>
                                        <p className={`text-xs mt-1 ${msg.userId === userId ? 'text-blue-200' : 'text-gray-400'} text-right`}>{formatTimestamp(msg.timestamp)}</p>
                                    </div>
                                </div>
                            ))}
                            <div ref={messagesEndRef} />
                        </div>
                        <div className="p-4 bg-gray-800 border-t border-gray-600">
                            <div className="flex items-center bg-gray-600 rounded-lg p-1">
                                <input type="text" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} placeholder={placeholderText} className="flex-1 p-3 bg-transparent text-gray-100 placeholder-gray-400 focus:outline-none" onKeyPress={(e) => e.key === 'Enter' && !e.shiftKey && (handleSendMessage(), e.preventDefault())} />
                                <button onClick={handleSendMessage} disabled={!newMessage.trim()} className="p-2 rounded-md transition duration-150 disabled:opacity-50"><SendIcon /></button>
                            </div>
                        </div>
                    </>
                ) : (
                    <div className="flex-1 flex items-center justify-center"><p className="text-xl text-gray-400">
                        {isLoadingChannels || isLoadingDms ? "Loading..." : "Select or create a conversation."}
                    </p></div>
                )}
                {error && <div className="fixed bottom-4 right-4 bg-red-500 text-white p-3 rounded-lg shadow-lg transition-opacity duration-300 animate-pulse">Error: {error}</div>}
            </div>

            {/* User List Modal for DMs */}
            {showUserListModal && (
                <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
                    <div className="bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md max-h-[80vh] flex flex-col">
                        <h3 className="text-lg font-semibold mb-4">Start a new Direct Message</h3>
                        <div className="flex-grow overflow-y-auto border-t border-b border-gray-700 py-2 my-2 pr-2">
                            {isLoadingUsers ? <p>Loading users...</p> : allUsers.length === 0 ? <p>No other users found.</p> : allUsers.map(user => (
                                <div key={user.id} onClick={() => handleStartOrSelectDm(user)} className="flex items-center p-3 hover:bg-gray-700 rounded-md cursor-pointer">
                                    <UsersIcon />
                                    <span className="ml-3">{user.displayName} <span className="text-xs text-gray-500">({user.id.substring(0,8)})</span></span>
                                </div>
                            ))}
                        </div>
                        <button onClick={() => setShowUserListModal(false)} className="mt-4 bg-gray-600 hover:bg-gray-500 text-white font-semibold p-2 rounded-md">Close</button>
                    </div>
                </div>
            )}
        </div>
    );
};

export default App;