"""Custom Gradio web UI for the Quant Research Environment."""

import gradio as gr

from .theme import DARK_THEME, NEON_CSS
from .tabs.readme_tab import build_readme_tab
from .tabs.playground_tab import build_playground_tab
from .tabs.traces_tab import build_traces_tab
from .tabs.leaderboard_tab import build_leaderboard_tab
from .tabs.tasks_tab import build_tasks_tab


def build_ui(web_manager, metadata) -> gr.Blocks:
    """Build the full multi-tab Gradio application."""
    with gr.Blocks(
        title="Quant Research Environment",
    ) as app:
        gr.HTML("""
        <div style="
            text-align: center;
            padding: 28px 16px 12px 16px;
            width: 100%;
            box-sizing: border-box;
        ">
            <h1 style="
                font-size: clamp(1.8em, 4vw, 3em);
                font-weight: 900;
                background: linear-gradient(135deg, #00e5ff 0%, #7c4dff 50%, #ff4081 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin: 0;
                letter-spacing: -1px;
                line-height: 1.15;
            ">Quant Research Environment</h1>
            <p style="
                color: #8b949e;
                font-size: clamp(0.85em, 1.5vw, 1.1em);
                margin-top: 8px;
                font-weight: 400;
            ">AI agents as quantitative researchers on real Indian equity data</p>
        </div>
        """)

        with gr.Tabs():
            with gr.Tab("\u25a4  README", id="readme"):
                build_readme_tab(metadata)
            with gr.Tab("\u25b6  Playground", id="play"):
                build_playground_tab(web_manager)
            with gr.Tab("\u21af  Traces", id="traces"):
                build_traces_tab()
            with gr.Tab("\u2606  Leaderboard", id="lb"):
                build_leaderboard_tab()
            with gr.Tab("\u2630  Tasks", id="tasks"):
                build_tasks_tab()

    return app