import gradio as gr
from data_loader import METHODOLOGY
from utils import (
    get_rank_badge,
    get_score_bar,
    get_score_bar_secondary,
    get_type_badge,
)

def filter_leaderboard(df, sort_by):
    filtered_df = df.copy()

    if sort_by == "Score on obfuscated questions":
        filtered_df = filtered_df.sort_values(by="Obfuscated score", ascending=False)
    else:
        filtered_df = filtered_df.sort_values(by="Baseline score", ascending=False)

    filtered_df["Rank"] = range(1, len(filtered_df) + 1)

    # Generate styled table HTML
    table_html = f"""
    <style>
        @media (prefers-color-scheme: dark) {{
            :root {{
                --bg-color: #1a1b1e;
                --text-color: #ffffff;
                --border-color: #2d2e32;
                --hover-bg: #2d2e32;
                --note-bg: #2d2e32;
                --note-text: #a1a1aa;
                --accent-blue: #60A5FA;
                --accent-purple: #A78BFA;
                --accent-pink: #F472B6;
                --score-bg: rgba(255, 255, 255, 0.1);
            }}
        }}
        
        @media (prefers-color-scheme: light) {{
            :root {{
                --bg-color: #ffffff;
                --text-color: #000000;
                --border-color: #e5e7eb;
                --hover-bg: #f3f4f6;
                --note-bg: #f3f4f6;
                --note-text: #4b5563;
                --accent-blue: #3B82F6;
                --accent-purple: #8B5CF6;
                --accent-pink: #EC4899;
                --score-bg: rgba(0, 0, 0, 0.1);
            }}
        }}
        
        .dark-table-container {{
            background: var(--bg-color);
            border-radius: 12px;
            padding: 1px;
            margin: 20px 0;
        }}
        
        .dark-styled-table {{
            width: 100%;
            border-collapse: collapse;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-color);
            color: var(--text-color);
        }}
        
        .dark-styled-table thead {{
            position: sticky;
            top: 0;
            background: var(--bg-color);
            z-index: 1;
        }}
        
        .dark-styled-table th {{
            padding: 16px;
            text-align: left;
            font-weight: 500;
            color: var(--text-color);
            border-bottom: 1px solid var(--border-color);
        }}
        
        .dark-styled-table td {{
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
        }}
        
        .dark-styled-table tbody tr:hover {{
            background: var(--hover-bg);
        }}
        
        .model-cell {{
            font-weight: 500;
        }}
        
        .score-cell {{
            font-weight: 500;
        }}
        
        .note-box {{
            margin-top: 20px;
            padding: 16px;
            background: var(--note-bg);
            border-radius: 8px;
            color: var(--note-text);
        }}
    </style>
    
    <div class="dark-table-container">
        <table class="dark-styled-table">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Model</th>
                    <th>Provider</th>
                    <th>Type</th>
                    <th>Exact match score (obfuscated questions)</th>
                    <th>Exact match score (all questions)</th> 
                </tr>
            </thead>
            <tbody>
    """

    for _, row in filtered_df.iterrows():
        table_html += f"""
            <tr>
                <td>{get_rank_badge(row['Rank'])}</td>
                <td class="model-cell">{row['Model']}</td>
                <td class="vendor-cell">{row['Provider']}</td>
                <td>{get_type_badge(row['Type'])}</td>
                <td class="score-cell">{get_score_bar(row['Obfuscated score'])}</td>
                <td class="score-cell">{get_score_bar_secondary(row['Baseline score'])}</td>
            </tr>
        """

    return table_html


def create_leaderboard_tab(df, HEADER_CONTENT, CARDS):
    gr.HTML(HEADER_CONTENT + CARDS)

    # Filters row
    with gr.Row(equal_height=True):
        with gr.Column(scale=0.4):
            sort_by = gr.Dropdown(
                choices=["Score on obfuscated questions", "Score on all questions"],
                value="Score on obfuscated questions",
                label="Sort by",
            )

    # Content
    output = gr.HTML()

    sort_by.change(
        fn=lambda s: filter_leaderboard(df, s),
        inputs=[sort_by],
        outputs=[output],
    )

    return output