import gradio as gr

# Custom CSS for styling
custom_css = """
.header-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    text-align: center;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 0;
    border-radius: 0;
}

.header-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.header-subtitle {
    font-size: 1.1em;
    opacity: 0.9;
    font-weight: 300;
}

.chat-container {
    height: 400px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    background-color: #fafafa;
}

.input-container {
    margin-top: 15px;
}

.send-button {
    background: linear-gradient(45deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
}

.tab-nav {
    background-color: #f5f5f5;
    border-radius: 10px 10px 0 0;
}

.gradio-container {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 100px;
}

/* Ensure content doesn't hide under fixed header */
.main-content {
    margin-top: 20px;
}

/* Override Gradio's default container padding */
.contain {
    padding-top: 0 !important;
}
"""

# Custom HTML header
header_html = """
<div class="header-container">
    <div class="header-title">Agent Rox</div>
    <div class="header-subtitle">Multi-Task AI Agent with Multiple MCP</div>
</div>
"""

def chat_function(message, history):
    """Simple chat function - replace with your actual logic"""
    response = f"Agent Rox received: {message}"
    history.append([message, response])
    return history, ""

def task_function(task_input):
    """Task processing function"""
    return f"Task processed: {task_input}"

def ai_agents_function(agent_config):
    """AI agents configuration function"""
    return f"AI Agents configured: {agent_config}"

def cookies_function():
    """Cookies management function"""
    return "Cookies management interface"

def config_function(config_data):
    """Configuration function"""
    return f"Configuration updated: {config_data}"

def how_to_use_function():
    """How to use information function"""
    return """
    # How to Use Agent Rox
    
    1. **Chat**: Interact with the AI agent through natural conversation
    2. **Task**: Submit specific tasks for processing
    3. **AI Agents**: Configure multiple AI agents for different purposes
    4. **Cookies**: Manage session cookies and preferences
    5. **Config**: Adjust system configuration settings
    6. **How to Use**: View this help information
    """

# Create the Gradio interface
with gr.Blocks(css=custom_css, title="Agent Rox", theme=gr.themes.Soft()) as demo:
    # Custom header
    gr.HTML(header_html)
    
    # Main content wrapper
    with gr.Column(elem_classes=["main-content"]):
        # Main tabs
        with gr.Tabs():
            # Chat Tab
            with gr.Tab("chat"):
                with gr.Column():
                    chatbot = gr.Chatbot(
                        value=[],
                        elem_classes=["chat-container"],
                        height=400,
                        show_label=False
                    )
                    with gr.Row(elem_classes=["input-container"]):
                        with gr.Column(scale=4):
                            msg_input = gr.Textbox(
                                placeholder="types your message",
                                show_label=False,
                                container=False
                            )
                        with gr.Column(scale=1):
                            send_btn = gr.Button("Send", elem_classes=["send-button"])
                    
                    # Chat functionality
                    def respond(message, chat_history):
                        bot_message = f"Agent Rox: I received your message '{message}'. How can I help you today?"
                        chat_history.append([message, bot_message])
                        return chat_history, ""
                    
                    send_btn.click(respond, [msg_input, chatbot], [chatbot, msg_input])
                    msg_input.submit(respond, [msg_input, chatbot], [chatbot, msg_input])
            
            # Task Tab
            with gr.Tab("task"):
                with gr.Column():
                    gr.Markdown("## Task Management")
                    task_input = gr.Textbox(
                        label="Enter Task",
                        placeholder="Describe the task you want Agent Rox to perform...",
                        lines=4
                    )
                    task_btn = gr.Button("Process Task")
                    task_output = gr.Textbox(label="Task Result", interactive=False)
                    
                    task_btn.click(task_function, inputs=task_input, outputs=task_output)
            
            # AI Agents Tab
            with gr.Tab("ai agents"):
                with gr.Column():
                    gr.Markdown("## AI Agents Configuration")
                    agent_name = gr.Textbox(label="Agent Name", placeholder="Enter agent name...")
                    agent_type = gr.Dropdown(
                        choices=["GPT-4", "Claude", "Gemini", "Custom"],
                        label="Agent Type"
                    )
                    agent_config = gr.Textbox(
                        label="Configuration",
                        placeholder="Enter agent configuration...",
                        lines=3
                    )
                    config_btn = gr.Button("Configure Agent")
                    agent_output = gr.Textbox(label="Configuration Result", interactive=False)
                    
                    config_btn.click(
                        lambda name, type_val, config: f"Agent '{name}' of type '{type_val}' configured with: {config}",
                        inputs=[agent_name, agent_type, agent_config],
                        outputs=agent_output
                    )
            
            # Cookies Tab
            with gr.Tab("cookies"):
                with gr.Column():
                    gr.Markdown("## Cookies Management")
                    gr.Markdown("Manage your session cookies and preferences here.")
                    cookies_info = gr.Textbox(
                        label="Current Cookies",
                        value="Session cookies are active",
                        interactive=False
                    )
                    clear_cookies_btn = gr.Button("Clear Cookies")
                    cookies_status = gr.Textbox(label="Status", interactive=False)
                    
                    clear_cookies_btn.click(
                        lambda: "Cookies cleared successfully",
                        outputs=cookies_status
                    )
            
            # Config Tab
            with gr.Tab("config"):
                with gr.Column():
                    gr.Markdown("## System Configuration")
                    api_key = gr.Textbox(
                        label="API Key",
                        placeholder="Enter your API key...",
                        type="password"
                    )
                    model_selection = gr.Dropdown(
                        choices=["GPT-4", "GPT-3.5", "Claude-3", "Gemini-Pro"],
                        label="Default Model",
                        value="GPT-4"
                    )
                    temperature = gr.Slider(
                        minimum=0.0,
                        maximum=2.0,
                        value=0.7,
                        step=0.1,
                        label="Temperature"
                    )
                    save_config_btn = gr.Button("Save Configuration")
                    config_status = gr.Textbox(label="Configuration Status", interactive=False)
                    
                    save_config_btn.click(
                        lambda key, model, temp: f"Configuration saved - Model: {model}, Temperature: {temp}",
                        inputs=[api_key, model_selection, temperature],
                        outputs=config_status
                    )
            
            # How to Use Tab
            with gr.Tab("how to use"):
                gr.Markdown(how_to_use_function())

# Launch the interface
if __name__ == "__main__":
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=False,
        debug=True
    )