"""
Streamlit dashboard for the Dippy Roleplay Subnet Leaderboard
"""
import requests
import streamlit as st
import pandas as pd

st. set_page_config(layout="wide")


def leaderboard_dashboard():
    # load the logo from image.txt file as base64
    with open("image.txt", "r") as f:
        image = f.read()

    st.markdown(
        f"""
        <div style="text-align: center;">
            <img src="data:image/png;base64,{image}" alt="Dippy Roleplay Logo" width="600" height="300" style="margin-bottom: 2rem;">
            <h1 style="margin-top: 0;">SN11-Dippy-Roleplay Leaderboard</h1>
            <div style="font-size: 18px;">This is the leaderboard for the Dippy validation API hosted by SN11.</div>
        </div>
        """,
        unsafe_allow_html=True,
    )
    st.markdown("---")
    
    # Add emojis based on the status
    status_emojis = {
        'COMPLETED': '✅COMPLETED',
        'FAILED': '❌FAILED',
        'QUEUED': '🕒QUEUED',
        'RUNNING': '🏃RUNNING'
    }

    # Get the leaderboard data from the API
    response = requests.get("http://34.41.206.211:8000/leaderboard")
    if response.status_code != 200:
        st.error("Failed to fetch leaderboard data.")
        return
    
    # Parse the response JSON data
    leaderboard_data = response.json()
    # Convert the data to a DataFrame
    leaderboard = pd.DataFrame(leaderboard_data)

    leaderboard['status'] = leaderboard['status'].map(lambda status: status_emojis.get(status, status))
    # Sort the leaderboard by the total_score column
    leaderboard = leaderboard.sort_values(by='total_score', ascending=False, ignore_index=True)

    front_order = ['repo_namespace', 'repo_name', 'total_score', 'status', 'chat_template_type', 'hash']

    # move status column to the front
    column_order = front_order + [column for column in leaderboard.columns if column not in front_order]

    leaderboard = leaderboard[column_order]

    st.write(leaderboard)

if __name__ == '__main__':
    leaderboard_dashboard()