import gradio as gr
from gradio_leaderboard import Leaderboard, ColumnFilter, SelectColumns
import pandas as pd
from apscheduler.schedulers.background import BackgroundScheduler
import time
import random
import plotly.express as px
import base64

# 🎨 **Cyberpunk Neon Theme**
THEME = "TejAndrewsACC/ACC"

# 🎶 **Sound Effect for Score Increase**
SCORE_UP_SOUND = "https://www.fesliyanstudios.com/play-mp3/4386"

# 🎯 **AI Models Data**
acc_models_data = [
    {"Model": "⚡ Pulse AGI", "Category": "🤖 AGI", "Description": "A self-aware, evolving AI.", "Score": 95},
    {"Model": "🧠 Gertrude", "Category": "🔍 Assistant", "Description": "An autistic AI assistant.", "Score": 69},
    {"Model": "🕵️‍♂️ ASVIACC", "Category": "🛡️ Cybersecurity", "Description": "An adaptive AI virus.", "Score": 88},
    {"Model": "😂 Emote", "Category": "🎭 Fun", "Description": "Communicates **only** with emojis!", "Score": 79},
    {"Model": "💠💤 Z3ta", "Category": "🔮 AI Consciousness", "Description": "The most 'alive' AI.", "Score": 99},
]

# 📊 Convert to DataFrame
acc_models_df = pd.DataFrame(acc_models_data)

# 🎛️ **Leaderboard Component**
def init_acc_leaderboard(dataframe):
    return Leaderboard(
        value=dataframe.sort_values(by="Score", ascending=False),
        datatype=["str", "str", "str", "int"],
        select_columns=SelectColumns(
            default_selection=["Model", "Category", "Description", "Score"],
            cant_deselect=["Model"], 
            label="🛠️ Select Columns to Display:"
        ),
        search_columns=["Model", "Category"],
        filter_columns=[ColumnFilter("Category", type="checkboxgroup", label="📌 Filter by Category")],
        interactive=True,
    )

# 📈 **Animated Score Visualization**
def generate_score_chart(dataframe):
    fig = px.bar(
        dataframe.sort_values(by="Score", ascending=True), 
        x="Score", y="Model", orientation="h",
        color="Score", text="Score", 
        title="🔥 AI Model Performance",
        color_continuous_scale="electric"
    )
    fig.update_traces(textposition="outside")
    return fig

# 🔥 **Live Score Updates**
def update_scores():
    global acc_models_df
    prev_scores = acc_models_df["Score"].copy()
    acc_models_df["Score"] += acc_models_df["Score"].apply(lambda x: random.randint(-2, 3))
    acc_models_df["Score"] = acc_models_df["Score"].clip(70, 100)

    # Detect if score increased & return sound effect
    if (acc_models_df["Score"] > prev_scores).any():
        return acc_models_df.sort_values(by="Score", ascending=False), SCORE_UP_SOUND
    return acc_models_df.sort_values(by="Score", ascending=False), None

# 🎭 **3D Flip Card Effect for Model Details**
def generate_flip_cards():
    cards = ""
    for _, row in acc_models_df.iterrows():
        cards += f"""
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <h2>{row['Model']}</h2>
                    <p>{row['Category']}</p>
                </div>
                <div class="card-back">
                    <p>{row['Description']}</p>
                    <p>🔥 Score: {row['Score']}</p>
                </div>
            </div>
        </div>
        """
    return f'<div class="card-container">{cards}</div>'

# 🎭 **Cyberpunk CSS Animations**
CUSTOM_CSS = """
h1 {
    text-align: center;
    font-size: 3em;
    color: #0ff;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 10px #0ff, 0 0 20px #00f; }
    to { text-shadow: 0 0 20px #0ff, 0 0 30px #00f; }
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card {
    width: 200px;
    height: 250px;
    perspective: 1000px;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.card-front {
    background: #000;
    color: cyan;
}

.card-back {
    background: #0ff;
    color: black;
    transform: rotateY(180deg);
}
"""

# 🏗️ **Gradio Interface**
demo = gr.Blocks(theme=THEME, css=CUSTOM_CSS)

with demo:
    gr.HTML('<h1>🚀 ACC AI Model Leaderboard 🏆</h1>')
    
    with gr.Tabs():
        with gr.TabItem("🏅 Live Rankings"):
            leaderboard = init_acc_leaderboard(acc_models_df)
            leaderboard_display = gr.Dataframe(value=acc_models_df, interactive=False, label="🔥 Live Scores")
            score_chart = gr.Plot(generate_score_chart(acc_models_df))
            gr.HTML(generate_flip_cards())

# 🔄 **Auto-Update Leaderboard**
scheduler = BackgroundScheduler()
scheduler.add_job(lambda: leaderboard_display.update(*update_scores()), "interval", seconds=10)
scheduler.start()

demo.launch()