import gradio as gr
import matplotlib.pyplot as plt
import matplotlib

from bar_plot import create_matplotlib_bar_plot


# Configure matplotlib for better performance
matplotlib.use("Agg")
plt.ioff()


def load_css():
    """Load CSS styling."""
    try:
        with open("styles.css", "r") as f:
            return f.read()
    except FileNotFoundError:
        return "body { background: #000; color: #fff; }"


def refresh_plot():
    """Generate new matplotlib charts and update description."""
    sidebar_text = "**Transformer CI Dashboard**<br>-<br>**AMD runs on MI325**<br>**NVIDIA runs on A10**<br><br>*This dashboard only tracks important models*<br>*(Data refreshed)*"
    return create_matplotlib_bar_plot(), sidebar_text


# Create Gradio interface
with gr.Blocks(
    title="Random Data Dashboard", css=load_css(), fill_height=True, fill_width=True
) as demo:
    with gr.Row():
        # Sidebar
        with gr.Column(scale=1, elem_classes=["sidebar"]):
            gr.Markdown("# 🤖 TCID", elem_classes=["sidebar-title"])
            description = gr.Markdown(
                "**Transformer CI Dashboard**<br>-<br>**AMD runs on MI325**<br>**NVIDIA runs on A10**<br><br>*This dashboard only tracks important models*",
                elem_classes=["sidebar-description"],
            )
            summary_btn = gr.Button(
                "summary\n📊",
                variant="primary",
                size="lg",
                elem_classes=["summary-button"],
            )

        # Main plot area
        with gr.Column(elem_classes=["main-content"]):
            plot = gr.HTML(
                create_matplotlib_bar_plot(),
                elem_classes=["plot-container"],
            )

    # Button click handler
    summary_btn.click(fn=refresh_plot, outputs=[plot, description])

if __name__ == "__main__":
    demo.launch()