import gradio as gr
from data_loader import (
    load_data,
    CATEGORIES,
    INSIGHTS,
    METHODOLOGY,
    HEADER_CONTENT,
    CARDS,
)
from utils import model_info_tab, filter_leaderboard
from visualization import setup_matplotlib

def create_app():
    setup_matplotlib()
    df = load_data()

    with gr.Blocks(theme=gr.themes.Soft()) as app:
        with gr.Tabs():
            with gr.Tab("Leaderboard"):
                gr.HTML(HEADER_CONTENT + CARDS)
                with gr.Row():
                    # Left column for filters (20% width)
                    with gr.Column(scale=1):
                        gr.HTML(
                            """
                            <div style="background: #1a1b1e; padding: 20px; border-radius: 12px; margin-bottom: 20px;">
                                <h3 style="margin-top: 0; color: white; font-size: 1.2em;">Filters</h3>
                            </div>
                        """
                        )
                        model_type = gr.Dropdown(
                            choices=["All"] + df["Model Type"].unique().tolist(),
                            value="All",
                            label="Model Type",
                            container=True,
                        )
                        category = gr.Dropdown(
                            choices=list(CATEGORIES.keys()),
                            value=list(CATEGORIES.keys())[0],
                            label="Category",
                            container=True,
                        )
                        sort_by = gr.Radio(
                            choices=["Performance", "Cost"],
                            value="Performance",
                            label="Sort by",
                            container=True,
                        )

                    # Right column for content (80% width)
                    with gr.Column(scale=4):
                        output = gr.HTML()
                        plot1 = gr.Plot()
                        plot2 = gr.Plot()
                        gr.Markdown(METHODOLOGY)

                for input_comp in [model_type, category, sort_by]:
                    input_comp.change(
                        fn=lambda m, c, s: filter_leaderboard(df, m, c, s),
                        inputs=[model_type, category, sort_by],
                        outputs=[output, plot1, plot2],
                    )

            with gr.Tab("Model Comparison"):
                gr.HTML(HEADER_CONTENT + CARDS)
                with gr.Row():
                    # Left column for filters (20% width)
                    with gr.Column(scale=1):
                        gr.HTML(
                            """
                            <div style="background: #1a1b1e; padding: 20px; border-radius: 12px; margin-bottom: 20px;">
                                <h3 style="margin-top: 0; color: white; font-size: 1.2em;">Models</h3>
                            </div>
                        """
                        )
                        model_selector = gr.Dropdown(
                            choices=df["Model"].unique().tolist(),
                            value=df.sort_values("Model Avg", ascending=False).iloc[0][
                                "Model"
                            ],
                            multiselect=True,
                            label="Select Models",
                            container=True,
                        )

                    # Right column for content (80% width)
                    with gr.Column(scale=4):
                        model_info = gr.HTML()
                        radar_plot = gr.Plot()

                model_selector.change(
                    fn=lambda m: model_info_tab(df, m),
                    inputs=[model_selector],
                    outputs=[model_info, radar_plot],
                )

        app.load(
            fn=lambda: filter_leaderboard(
                df, "All", list(CATEGORIES.keys())[0], "Performance"
            ),
            outputs=[output, plot1, plot2],
        )

        app.load(
            fn=lambda: model_info_tab(
                df, [df.sort_values("Model Avg", ascending=False).iloc[0]["Model"]]
            ),
            outputs=[model_info, radar_plot],
        )

    return app

demo = create_app()
demo.launch()