import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot, deleteDoc, collection, getDocs } from 'firebase/firestore';

function App() {
    // State for game logic
    const [challenge, setChallenge] = useState(''); // Stores the current full story string
    const [userResponse, setUserResponse] = useState('');
    const [aiFeedback, setAiFeedback] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    
    // State for Firebase
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [appId, setAppId] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false); // To ensure auth is complete before Firestore ops
    const [isLoggedIn, setIsLoggedIn] = useState(false); // To track if a user is authenticated (Google or Anonymous)
    const [isGoogleSignedIn, setIsGoogleSignedIn] = useState(false); // New state to track Google sign-in
    const [showAuthOptions, setShowAuthOptions] = useState(false); // To control visibility of sign-in buttons

    // State for collaborative story
    const [currentCollaborativeStory, setCurrentCollaborativeStory] = useState('');
    const [isStoryLoading, setIsStoryLoading] = useState(true);
    const [activeUsersCount, setActiveUsersCount] = useState(0); // New state for active users

    // State for Game Codes
    const [gameCodeInput, setGameCodeInput] = useState(''); // User's input for game code
    const [currentGameCode, setCurrentGameCode] = useState(null); // The active game code
    const [gameCodeError, setGameCodeError] = useState(''); // Error message for game code
    const [isGameSessionActive, setIsGameSessionActive] = useState(false); // True when a game code is set and loaded
    const unsubscribeStoryRef = useRef(null); // Ref to store the Firestore story unsubscribe function
    const unsubscribeUsersRef = useRef(null); // Ref to store the Firestore users unsubscribe function

    // Dynamic MAX_PLAYERS based on login status
    const MAX_PLAYERS = isGoogleSignedIn ? 18 : 4; 

    // Helper function to generate a random 4-digit code
    const generateRandomCode = () => {
        return Math.floor(1000 + Math.random() * 9000).toString();
    };

    // Firebase Initialization and Authentication
    useEffect(() => {
        try {
            const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
            const currentAppId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
            setAppId(currentAppId);

            const app = initializeApp(firebaseConfig);
            const firestoreDb = getFirestore(app);
            const firebaseAuth = getAuth(app);

            setDb(firestoreDb);
            setAuth(firebaseAuth);

            onAuthStateChanged(firebaseAuth, async (user) => {
                if (user) {
                    setUserId(user.uid);
                    setIsLoggedIn(true);
                    // Determine if signed in via Google (user.providerData will contain google.com)
                    const isGoogle = user.providerData.some(provider => provider.providerId === GoogleAuthProvider.PROVIDER_ID);
                    setIsGoogleSignedIn(isGoogle);
                    setIsAuthReady(true);
                    setShowAuthOptions(false); // Hide auth options once logged in
                } else {
                    setIsLoggedIn(false);
                    setIsGoogleSignedIn(false); // Reset Google sign-in status
                    setUserId(null); // Clear userId if logged out
                    setIsAuthReady(true); // Still ready, just not authenticated yet
                    // Only show auth options if no token is provided initially and not already logged in
                    const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
                    if (!initialAuthToken) {
                        setShowAuthOptions(true);
                    }
                }
            });

            // Initial sign-in attempt if a custom token is provided by the environment
            const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
            if (initialAuthToken && firebaseAuth && !firebaseAuth.currentUser) {
                 signInWithCustomToken(firebaseAuth, initialAuthToken).catch(e => console.error("Custom token sign-in failed:", e));
            } else if (!initialAuthToken && !firebaseAuth.currentUser) {
                // If no custom token, and not already signed in, wait for user's action (Google/Anonymous)
                setShowAuthOptions(true); // Ensure auth options are shown if no auto-login
            }


        } catch (error) {
            console.error("Firebase initialization error:", error);
            setUserId(crypto.randomUUID()); // Fallback for very early errors
            setIsAuthReady(true);
            setShowAuthOptions(true); // Show options if init fails
        }
    }, []);

    // Firebase user presence functions
    const addUserPresence = async (code, id) => {
        if (!db || !appId || !id || !code) {
            console.warn("Attempted to add user presence before all necessary data was available.");
            return;
        }
        try {
            const userDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'game_sessions', code, 'users', id);
            await setDoc(userDocRef, { online: true, lastSeen: new Date().toISOString() }, { merge: true });
            console.log(`User ${id} joined session ${code}`);
        } catch (error) {
            console.error("Error adding user presence:", error);
        }
    };

    const removeUserPresence = async (code, id) => {
        if (!db || !appId || !id || !code) {
             console.warn("Attempted to remove user presence before all necessary data was available.");
             return;
        }
        try {
            const userDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'game_sessions', code, 'users', id);
            await deleteDoc(userDocRef);
            console.log(`User ${id} left session ${code}`);
        } catch (error) {
            console.error("Error removing user presence:", error);
        }
    };

    // Firestore Real-time Listener for Collaborative Story and User Presence
    useEffect(() => {
        // Cleanup previous listeners
        if (unsubscribeStoryRef.current) {
            unsubscribeStoryRef.current();
            unsubscribeStoryRef.current = null;
        }
        if (unsubscribeUsersRef.current) {
            unsubscribeUsersRef.current();
            unsubscribeUsersRef.current = null;
        }

        if (!db || !isAuthReady || !appId || !currentGameCode || !userId) {
            // Wait for all dependencies to be ready, including userId
            setCurrentCollaborativeStory('');
            setIsGameSessionActive(false);
            setIsStoryLoading(false);
            setActiveUsersCount(0);
            return;
        }

        // Add user presence when a session becomes active
        // Only add presence if userId is not null (i.e., user is authenticated)
        if (userId) {
            addUserPresence(currentGameCode, userId);
        }

        // 1. Story Listener
        const storyDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'game_sessions', currentGameCode);
        setIsStoryLoading(true);
        const unsubscribeStory = onSnapshot(storyDocRef, (docSnap) => {
            if (docSnap.exists()) {
                const storyData = docSnap.data();
                setCurrentCollaborativeStory(storyData.content || '');
                setChallenge(storyData.content || '');
                setIsGameSessionActive(true);
            } else {
                setCurrentCollaborativeStory('This game session is new. Be the first to start the story!');
                setChallenge('');
                setIsGameSessionActive(true);
            }
            setIsStoryLoading(false);
            setGameCodeError('');
        }, (error) => {
            console.error("Error listening to story updates:", error);
            setCurrentCollaborativeStory("Failed to load collaborative story for this code.");
            setIsGameSessionActive(false);
            setIsStoryLoading(false);
            setGameCodeError("Could not load game for this code. It might not exist or there's a connection issue.");
        });
        unsubscribeStoryRef.current = unsubscribeStory;

        // 2. Users Presence Listener
        const usersCollectionRef = collection(db, 'artifacts', appId, 'public', 'data', 'game_sessions', currentGameCode, 'users');
        const unsubscribeUsers = onSnapshot(usersCollectionRef, (snapshot) => {
            setActiveUsersCount(snapshot.size);
        }, (error) => {
            console.error("Error listening to active users:", error);
            setActiveUsersCount(0); // Reset or handle error
        });
        unsubscribeUsersRef.current = unsubscribeUsers;

        // Cleanup function for this useEffect
        return () => {
            // Remove user presence when component unmounts or dependencies change (e.g., game code changes)
            if (userId && currentGameCode) {
                removeUserPresence(currentGameCode, userId);
            }
            // Unsubscribe from both listeners
            if (unsubscribeStoryRef.current) {
                unsubscribeStoryRef.current();
            }
            if (unsubscribeUsersRef.current) {
                unsubscribeUsersRef.current();
            }
        };
    }, [db, isAuthReady, appId, currentGameCode, userId]); // userId added to dependencies

    // Function to call the Gemini API
    const callGeminiApi = async (prompt, currentStory = '', userPart = '') => {
        setIsLoading(true);
        let chatHistory = [];

        if (currentStory && userPart) {
            chatHistory.push({ role: "user", parts: [{ text: `Current story so far: "${currentStory}"\nUser's continuation: "${userPart}"\n${prompt}` }] });
        } else {
            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
        }

        const payload = { contents: chatHistory };
        const apiKey = "";
        const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

        try {
            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const result = await response.json();

            if (result.candidates && result.candidates.length > 0 &&
                result.candidates[0].content && result.candidates[0].content.parts &&
                result.candidates[0].content.parts.length > 0) {
                const text = result.candidates[0].content.parts[0].text;
                setIsLoading(false);
                return text;
            } else {
                console.error("Unexpected API response structure:", result);
                setIsLoading(false);
                return "Failed to generate content. Please try again.";
            }
        } catch (error) {
            console.error("Error calling Gemini API:", error);
            setIsLoading(false);
            return "An error occurred. Please check your network connection or try again later.";
        }
    };

    // Function to update the story in Firestore
    const updateCollaborativeStory = async (storyContent, codeToUpdate) => {
        const targetCode = codeToUpdate || currentGameCode;

        if (!db || !appId || !targetCode) {
            console.error("Firestore DB, App ID, or Game Code not available for update.");
            return;
        }
        try {
            const storyDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'game_sessions', targetCode);
            await setDoc(storyDocRef, { content: storyContent }, { merge: true });
        } catch (error) {
            console.error("Error updating collaborative story:", error);
        }
    };

    // Google Sign-In Function
    const handleGoogleSignIn = async () => {
        if (!auth) {
            setGameCodeError("Firebase Auth not initialized.");
            return;
        }
        setIsLoading(true);
        setGameCodeError('');
        try {
            const provider = new GoogleAuthProvider();
            await signInWithPopup(auth, provider);
            // onAuthStateChanged listener will handle setting userId and isLoggedIn
        } catch (error) {
            console.error("Google Sign-In Error:", error);
            setGameCodeError(error.message || "Failed to sign in with Google.");
        } finally {
            setIsLoading(false);
        }
    };

    // Anonymous Sign-In Function
    const handleAnonymousSignIn = async () => {
        if (!auth) {
            setGameCodeError("Firebase Auth not initialized.");
            return;
        }
        setIsLoading(true);
        setGameCodeError('');
        try {
            await signInAnonymously(auth);
            // onAuthStateChanged listener will handle setting userId and isLoggedIn
        } catch (error) {
            console.error("Anonymous Sign-In Error:", error);
            setGameCodeError(error.message || "Failed to sign in anonymously.");
        } finally {
            setIsLoading(false);
        }
    };


    const handleJoinGame = async () => {
        if (!gameCodeInput.trim() || gameCodeInput.length !== 4) {
            setGameCodeError("Please enter a valid 4-digit game code.");
            return;
        }
        if (!db || !appId || !userId) { // Ensure userId is available before checking capacity/joining
            setGameCodeError("Authentication not ready. Please wait a moment or sign in.");
            return;
        }

        setIsLoading(true);
        setGameCodeError('');

        try {
            // Check current number of users for this game code
            const usersCollectionRef = collection(db, 'artifacts', appId, 'public', 'data', 'game_sessions', gameCodeInput, 'users');
            const usersSnapshot = await getDocs(usersCollectionRef);
            
            // Use the dynamically calculated MAX_PLAYERS
            if (usersSnapshot.size >= MAX_PLAYERS) {
                setGameCodeError(`Session ${gameCodeInput} is full. (Max ${MAX_PLAYERS} players)`);
                setIsLoading(false);
                return;
            }

            // Proceed to join if not full
            setIsStoryLoading(true);
            setCurrentGameCode(gameCodeInput); // This will trigger the useEffect listener to add presence
        } catch (error) {
            console.error("Error checking session capacity:", error);
            setGameCodeError("Failed to check session capacity. Please try again.");
            setIsLoading(false);
        }
    };

    const handleGenerateAndStartNewGame = async () => {
        if (isLoading) return;
        if (!db || !appId || !userId) { // Ensure userId is available before starting
            setGameCodeError("Authentication not ready. Please wait a moment or sign in.");
            return;
        }
        
        setIsLoading(true);
        setAiFeedback('');
        setGameCodeError('');

        const newCode = generateRandomCode();
        setCurrentGameCode(newCode);

        const prompt = "Generate a very short, creative story opening that a user can continue. Keep it around 3-4 sentences. It should be open-ended and intriguing. The story should be a unique challenge for the user to continue. Start directly with the story, no introductory phrases.";
        const newChallenge = await callGeminiApi(prompt);

        setChallenge(newChallenge);
        setUserResponse('');

        await updateCollaborativeStory(newChallenge, newCode); 
        setIsLoading(false);
    };

    const submitUserResponse = async () => {
        if (isLoading || !userResponse.trim()) {
            if (!userResponse.trim()) {
                setAiFeedback("Please write something before submitting!");
            }
            return;
        }

        setIsLoading(true);
        const evaluationPrompt = "Evaluate the user's continuation for creativity, coherence, and how well it builds upon the existing story. Then, write the next 3-4 sentences of the story, making it more challenging or adding a twist that the user will have to respond to next. Make sure your continuation is cohesive with the user's part. Format your response by first providing a brief evaluation (e.g., 'Excellent continuation!', 'Interesting twist.', or 'Good effort, but try to stay more on track.'), followed by your story continuation on a new line.";
        
        const fullStorySoFar = `${currentCollaborativeStory}\n${userResponse}`;
        const aiResponse = await callGeminiApi(evaluationPrompt, currentCollaborativeStory, userResponse);

        const lines = aiResponse.split('\n');
        let evaluation = '';
        let storyContinuation = '';

        if (lines.length > 0) {
            evaluation = lines[0];
            storyContinuation = lines.slice(1).join('\n');
        } else {
            evaluation = "The AI responded, but the format was unexpected.";
            storyContinuation = aiResponse;
        }

        setAiFeedback(evaluation);
        const updatedFullStory = currentCollaborativeStory + "\n" + userResponse + "\n" + storyContinuation;
        
        setChallenge(updatedFullStory);
        setUserResponse('');

        await updateCollaborativeStory(updatedFullStory, currentGameCode);
        setIsLoading(false);
    };

    const handleLeaveGame = async () => {
        if (currentGameCode && userId) {
            await removeUserPresence(currentGameCode, userId);
        }
        setCurrentGameCode(null);
        setIsGameSessionActive(false);
        setGameCodeInput('');
        setUserResponse('');
        setAiFeedback('');
        setChallenge('');
        setGameCodeError('');
        setIsStoryLoading(true); // Reset loading state for next session
        setActiveUsersCount(0); // Reset user count
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-purple-800 to-blue-900 text-white font-inter flex items-center justify-center p-4">
            <div className="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl shadow-2xl p-8 max-w-4xl w-full flex flex-col space-y-6">
                <h1 className="text-4xl font-extrabold text-center text-purple-300 mb-6">
                    AI Story Challenge (Collaborative)
                </h1>

                {/* Authentication Options */}
                {!isLoggedIn && showAuthOptions && isAuthReady ? (
                    <div className="text-center space-y-6">
                        <p className="text-lg text-gray-200 mb-6">
                            Please sign in to join or start a collaborative story session.
                        </p>
                        <button
                            onClick={handleGoogleSignIn}
                            className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 flex items-center justify-center mx-auto mb-4"
                            disabled={isLoading}
                        >
                            <svg className="w-5 h-5 mr-3" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303a10.92 10.92 0 0 1-4.706 7.02l2.502 2.441a16.292 16.292 0 0 0 5.438 2.808l3.187 2.378 1.488-1.157a24.238 24.238 0 0 0 1.954-2.879l1.492-2.227-2.73-2.128-1.487-2.126-2.105-1.637z"/>
                                <path fill="#FF3D00" d="M6.399 24c0-1.892.493-3.708 1.365-5.322l-2.482-1.921A24.088 24.088 0 0 0 0 24.004c0 3.738.903 7.228 2.506 10.27l4.133-3.218C6.917 29.508 6.399 26.828 6.399 24z"/>
                                <path fill="#4CAF50" d="M24 44.001c6.19 0 11.218-4.148 13.567-9.754l-4.133-3.218C31.57 33.682 28.163 36 24 36c-5.228 0-9.626-3.136-11.597-7.533L7.705 30.56a23.953 23.953 0 0 0 16.295 13.441z"/>
                                <path fill="#1976D2" d="M43.611 20.083H24v8h11.303a10.92 10.92 0 0 1-4.706 7.02l2.502 2.441a16.292 16.292 0 0 0 5.438 2.808l3.187 2.378 1.488-1.157a24.238 24.238 0 0 0 1.954-2.879l1.492-2.227-2.73-2.128-1.487-2.126-2.105-1.637z" transform="translate(0 0)"/>
                                <path fill="#FFC107" d="M24 11.996c3.344 0 6.42 1.373 8.647 3.633l3.407-3.328C33.155 8.784 28.775 6 24 6c-8.318 0-15.358 6.452-16.295 15.6l4.133 3.218C14.374 15.136 18.772 12 24 12z"/>
                            </svg>
                            Sign in with Google
                        </button>
                        <button
                            onClick={handleAnonymousSignIn}
                            className="bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-75 mx-auto"
                            disabled={isLoading}
                        >
                            Continue as Anonymous
                        </button>
                        {gameCodeError && (
                            <p className="text-red-400 text-sm mt-2">{gameCodeError}</p>
                        )}
                    </div>
                ) : (
                    // Game Code Entry / Active Game
                    !isGameSessionActive && isLoggedIn ? (
                        <div className="text-center space-y-6">
                            <p className="text-lg text-gray-200">
                                Enter a 4-digit game code to join an existing story, or generate a new one to start a fresh game session!
                            </p>
                            <p className="text-md text-gray-400">
                                Max players per session: <span className="font-bold text-yellow-300">{MAX_PLAYERS}</span>
                            </p>
                            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                                <input
                                    type="text"
                                    maxLength="4"
                                    value={gameCodeInput}
                                    onChange={(e) => setGameCodeInput(e.target.value.replace(/[^0-9]/g, ''))} // Only allow digits
                                    placeholder="Enter 4-digit code"
                                    className="w-48 p-3 rounded-lg bg-gray-700 bg-opacity-70 border border-gray-600 text-white placeholder-gray-400 text-center text-xl tracking-widest focus:outline-none focus:ring-2 focus:ring-purple-500"
                                    disabled={isLoading}
                                />
                                <button
                                    onClick={handleJoinGame}
                                    className="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75"
                                    disabled={isLoading}
                                >
                                    Join Game
                                </button>
                            </div>
                            {gameCodeError && (
                                <p className="text-red-400 text-sm mt-2">{gameCodeError}</p>
                            )}
                            <p className="text-gray-300">- OR -</p>
                            <button
                                onClick={handleGenerateAndStartNewGame}
                                className="bg-purple-600 hover:bg-purple-700 active:bg-purple-800 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75"
                                disabled={isLoading}
                            >
                                {isLoading ? (
                                    <div className="flex items-center">
                                        <svg className="animate-spin h-5 w-5 mr-3 text-white" viewBox="0 0 24 24">
                                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                        Generating...
                                    </div>
                                ) : (
                                    'Generate New Code & Start New Game'
                                )}
                            </button>
                        </div>
                    ) : (
                        // Active Game Session UI
                        isGameSessionActive && isLoggedIn && ( // Ensure game is active and user is logged in
                            <>
                                <div className="flex flex-col space-y-4">
                                    <h2 className="text-2xl font-semibold text-blue-300 text-center">
                                        Game Code: <span className="text-yellow-300">{currentGameCode}</span>
                                    </h2>
                                    <p className="text-lg text-gray-200 text-center mt-2">
                                        Players in Session: <span className="font-bold text-green-300">{activeUsersCount} / {MAX_PLAYERS}</span>
                                    </p>
                                    <h2 className="text-2xl font-semibold text-blue-300">The Story So Far:</h2>
                                    <div className="bg-gray-700 bg-opacity-50 p-6 rounded-lg border border-gray-600 text-lg leading-relaxed whitespace-pre-wrap min-h-[150px]">
                                        {isStoryLoading ? (
                                            <div className="flex items-center justify-center text-purple-400">
                                                <svg className="animate-spin h-5 w-5 mr-3 text-purple-400" viewBox="0 0 24 24">
                                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                </svg>
                                                Loading story...
                                            </div>
                                        ) : (
                                            currentCollaborativeStory
                                        )}
                                    </div>

                                    {aiFeedback && (
                                        <div className="bg-blue-700 bg-opacity-50 p-4 rounded-lg border border-blue-600 text-md italic">
                                            <h3 className="font-semibold text-blue-200">AI's Feedback:</h3>
                                            <p>{aiFeedback}</p>
                                        </div>
                                    )}

                                    <h2 className="text-2xl font-semibold text-green-300 mt-4">Your Turn:</h2>
                                    <textarea
                                        className="w-full p-4 rounded-lg bg-gray-700 bg-opacity-70 border border-gray-600 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 resize-y min-h-[120px]"
                                        value={userResponse}
                                        onChange={(e) => setUserResponse(e.target.value)}
                                        placeholder="Continue the story here..."
                                        disabled={isLoading || isStoryLoading}
                                    ></textarea>

                                    <button
                                        onClick={submitUserResponse}
                                        className="bg-green-600 hover:bg-green-700 active:bg-green-800 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 self-center"
                                        disabled={isLoading || isStoryLoading}
                                    >
                                        {isLoading ? (
                                            <div className="flex items-center">
                                                <svg className="animate-spin h-5 w-5 mr-3 text-white" viewBox="0 0 24 24">
                                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                                </svg>
                                                AI Thinking...
                                            </div>
                                        ) : (
                                            'Submit & AI Continues'
                                        )}
                                    </button>

                                    <button
                                        onClick={handleLeaveGame}
                                        className="bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-bold py-2 px-6 rounded-full shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 self-center mt-4"
                                        disabled={isLoading || isStoryLoading}
                                    >
                                        Leave Game
                                    </button>
                                </div>
                            </>
                        )
                    )
                )}
            </div>
            {userId && (
                <div className="absolute bottom-4 right-4 bg-gray-900 bg-opacity-70 text-gray-400 text-sm p-3 rounded-lg shadow-md">
                    Your User ID: {userId}
                </div>
            )}
        </div>
    );
}

export default App;