import gradio as gr
import os

from src.webui.webui_manager import WebuiManager
from src.webui.components.settings import create_settings_tab
from src.webui.components.browser_use_agent_tab import create_browser_use_agent_tab
from src.webui.components.deep_research_agent_tab import create_deep_research_agent_tab

# Modern Glass theme with macOS-inspired aesthetics
custom_glass_theme = gr.themes.Soft().set(
    body_background_fill="linear-gradient(135deg, #1a1c2c 0%, #4a192c 100%)",
    background_fill_primary="rgba(30, 30, 45, 0.7)",
    background_fill_secondary="rgba(40, 40, 60, 0.5)",
    border_color_accent="rgba(255, 255, 255, 0.2)",
    border_color_primary="rgba(255, 255, 255, 0.1)",
    color_accent="#764ba2",
    color_accent_soft="#667eea",
    button_primary_background_fill="linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
    button_primary_text_color="white",
)

theme_map = {
    "Default": gr.themes.Default(),
    "Soft": gr.themes.Soft(),
    "Monochrome": gr.themes.Monochrome(),
    "Glass": custom_glass_theme,
}

def create_ui(theme_name="Glass"):
    css = """
    .gradio-container {
        width: 100vw !important;
        max-width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .main-row {
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .sidebar {
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(20px) !important;
        height: 100vh !important;
        padding: 24px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        overflow-y: auto !important;
    }
    .main-content {
        background: transparent !important;
        height: 100vh !important;
        padding: 40px !important;
        overflow-y: auto !important;
    }
    /* Fix accordion density in sidebar */
    .sidebar .gr-accordion {
        background: transparent !important;
        border: none !important;
    }
    .sidebar .gr-accordion-header {
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }
    """

    ui_manager = WebuiManager()

    with gr.Blocks(title="Cerebrow", theme=theme_map.get(theme_name, custom_glass_theme), css=css) as demo:
        gr.Markdown("<h1 style='text-align: center; font-size: 3em; margin-bottom: 20px;'>🧠 Cerebrow</h1>")
        
        with gr.Column(elem_classes=["main-content"]):
            with gr.Tabs() as main_tabs:
                    with gr.TabItem("⚙️ Settings", id="settings_tab"):
                        # Captured settings to pass to agents
                        agent_s, browser_s = create_settings_tab(ui_manager)

                    with gr.TabItem("🤖 Run Agent", id="agent_tab"):
                        create_browser_use_agent_tab(ui_manager, agent_s, browser_s)
                    
                    with gr.TabItem("🔍 Deep Research", id="research_tab"):
                        create_deep_research_agent_tab(ui_manager, agent_s, browser_s)

    return demo