import gradio as gr
import pandas as pd

from pages.summarization_playground import custom_css

# Sample data for the leaderboard
data = {
    'Rank': [1, 2, 3, 4, 5],
    'Methods': ['METHOD1_PLACEHOLDER', 'METHOD2_PLACEHOLDER', 'METHOD3_PLACEHOLDER', 'METHOD4_PLACEHOLDER', 'METHOD5_PLACEHOLDER'],
    'METRIC1_PLACEHOLDER Score': [1287, 1272, 1267, 1262, 1258],
    'METRIC2_PLACEHOLDER Score': [56905, 24913, 42981, 49828, 55567],
    'METRIC3_PLACEHOLDER Score': [3423, 3423, 2152, 4353, 2342],
    'Authors': ['AUTHOR1_PLACEHOLDER', 'AUTHOR2_PLACEHOLDER', 'AUTHOR3_PLACEHOLDER', 'AUTHOR4_PLACEHOLDER', 'AUTHOR5_PLACEHOLDER'],
}

df = pd.DataFrame(data)

def update_leaderboard(sort_by):
    # In a real implementation, this would filter the data based on the category
    sorted_df = df.sort_values(by=sort_by, ascending=False)

    # Update ranks based on new sorting
    sorted_df['Rank'] = range(1, len(sorted_df) + 1)

    # Convert DataFrame to HTML with clickable headers for sorting
    html = sorted_df.to_html(index=False, escape=False)

    # Add sorting links to column headers
    for column in sorted_df.columns:
        html = html.replace(f'<th>{column}</th>', 
                            f'<th><a href="#" onclick="sortBy(\'{column}\'); return false;">{column}</a></th>')

    return html

def create_leaderboard():
    with gr.Blocks(theme=gr.themes.Soft(spacing_size="sm",text_size="sm"), css=custom_css) as demo:
        gr.Markdown("# 🏆 Summarization Arena Leaderboard")

        with gr.Row():
            gr.Markdown("[Blog](placeholder) | [GitHub](placeholder) | [Paper](placeholder) | [Dataset](placeholder) | [Twitter](placeholder) | [Discord](placeholder)")

        gr.Markdown("Welcome to our open platform for evaluating LLM summarization capabilities. We use the DATASET_NAME_PLACEHOLDER dataset to generate summaries with MODEL_NAME_PLACEHOLDER. These summaries are then evaluated by STRONGER_MODEL_NAME_PLACEHOLDER using the METRIC1_PLACEHOLDER and METRIC2_PLACEHOLDER metrics")

        sort_by = gr.Dropdown(list(df.columns), label="Sort by", value="Rank")

        gr.Markdown("**Performance**\n\n**methods**: 4,   **questions**: 150")

        leaderboard = gr.HTML(update_leaderboard("Rank"), elem_id="leaderboard")

        sort_by.change(update_leaderboard, inputs=[sort_by], outputs=[leaderboard])

    return demo