import gradio as gr
import json
import os

# Optional: Load global state if persistence is required
GLOBAL_STATE_FILE = "global_state.json"
if os.path.exists(GLOBAL_STATE_FILE):
    with open(GLOBAL_STATE_FILE, "r") as f:
        global_game_state = json.load(f)
else:
    global_game_state = {}  # initialize an empty state

# Function to handle chat updates
def process_chat(message, local_state):
    # Initialize local state if None
    local_state = local_state or {}
    # Update local state with the latest message (example logic)
    local_state["last_message"] = message
    
    # Check for a command to update the global game state
    if message.strip().lower() == "update global":
        # Update the global state (here simply replace it with local_state)
        global global_game_state
        global_game_state = local_state.copy()
        # Optionally persist the global state to a file
        with open(GLOBAL_STATE_FILE, "w") as f:
            json.dump(global_game_state, f)
        response = "Global game updated!"
    else:
        response = f"Local game updated with: {message}"
    return "", local_state, response

with gr.Blocks() as demo:
    gr.Markdown("## Live Game & Chat Interface")

    # Create a two-column layout
    with gr.Row():
        # Left Column: Iframe for the game (takes more space)
        with gr.Column(scale=3):
            gr.Markdown("### Game")
            # The iframe points to your static index.html
            gr.HTML(
                value="""
                <iframe src="http://localhost:3000" style="width:100%; height:600px; border:none;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                """
            )
        # Right Column: Chat interface (smaller column)
        with gr.Column(scale=1):
            gr.Markdown("### Chat")
            # Chatbot to display the conversation or responses
            chat_output = gr.Textbox(label="Chat Output", interactive=False)
            # Textbox for user to input messages
            chat_input = gr.Textbox(
                placeholder="Type your message here...",
                label="Your Message"
            )
            # A hidden state to keep track of the local game state for the session
            local_state = gr.State({})

            # When user submits a message, call process_chat
            chat_input.submit(
                process_chat,
                inputs=[chat_input, local_state],
                outputs=[chat_input, local_state, chat_output],
            )

demo.launch(server_name="0.0.0.0", server_port=7860)