import time

import gradio as gr
import pandas as pd
from dotenv import load_dotenv
from fastapi import FastAPI

load_dotenv()

app = FastAPI()

LEADERBOARD_PATH = "leaderboard_personal.csv"


def create_leaderboard_ui():
    """Create the leaderboard UI with caching."""

    df = pd.read_csv(LEADERBOARD_PATH)
    df_html = df.to_html(classes="leaderboard-table", border=0, index=False)

    return f"""
    <div style="margin: 20px 0;">
        <style>
            .leaderboard-table {{
                width: 100%;
                border-collapse: collapse;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                border-radius: 8px;
                overflow: hidden;
            }}
            .leaderboard-table th {{
                background-color: #1a1a2e;
                color: white;
                font-weight: bold;
                text-align: left;
                padding: 14px;
                border-bottom: 2px solid #16213e;
            }}
            .leaderboard-table td {{
                padding: 12px 14px;
                border-bottom: 1px solid #333;
                background-color: #222;
                color: #fff;
            }}
            .leaderboard-table tr:hover td {{
                background-color: #2a2a3a;
            }}
            .leaderboard-table tr:nth-child(1) td:first-child {{
                background-color: #ffd700;
                color: #333;
                font-weight: bold;
                text-align: center;
                border-right: 1px solid #333;
            }}
            .leaderboard-table tr:nth-child(2) td:first-child {{
                background-color: #c0c0c0;
                color: #333;
                font-weight: bold;
                text-align: center;
                border-right: 1px solid #333;
            }}
            .leaderboard-table tr:nth-child(3) td:first-child {{
                background-color: #cd7f32;
                color: #333;
                font-weight: bold;
                text-align: center;
                border-right: 1px solid #333;
            }}
            .leaderboard-table tr:nth-child(1) td:nth-child(2) {{
                font-weight: bold;
                color: #ffd700;
            }}
            .leaderboard-table tr:nth-child(2) td:nth-child(2) {{
                font-weight: bold;
                color: #c0c0c0;
            }}
            .leaderboard-table tr:nth-child(3) td:nth-child(2) {{
                font-weight: bold;
                color: #cd7f32;
            }}
        </style>
        {df_html}
    </div>
    """


with gr.Blocks(theme=gr.themes.Default()) as demo:
    with gr.Column(scale=1):
        gr.Markdown("# 🏆 Leaderboard Personal Retos Hackathon 2025")
        leaderboard_html = gr.HTML(create_leaderboard_ui)

gr.mount_gradio_app(app, demo, path="/")

if __name__ == "__main__":
    import uvicorn

    uvicorn.run(app, host="0.0.0.0", port=7860)