import gradio as gr
import pandas as pd
from themes import IndonesiaTheme

def load_data(status_filter="All", keyword=""):
    df = pd.read_csv("https://huggingface.co/datasets/Deddy/leaderboard-dataset/raw/main/leaderboard.csv")

    if status_filter != "All":
        df = df[df['status'].str.contains(status_filter, case=False, na=False)]
    if keyword.strip():
        df = df[df['name'].str.contains(keyword, case=False, na=False)]

    df = df.sort_values("likes", ascending=False).head(100).reset_index(drop=True)

    # Kolom Visit tetap
    df["🔗 Visit"] = df["link"].apply(lambda url: f"<a href='{url}' target='_blank'>🌐 Visit</a>")

    # Kolom Name: bold, warna emas untuk top 10, emoji piala untuk top 3
    def decorate_name(row):
        i = row.name + 1  # row.name = index mulai dari 0
        name = f"{row['name']}"
        medal = ""
        if i == 1:
            medal = "👑  "
        elif i == 2:
            medal = "🏆  "
        elif i == 3:
            medal = "🏅  "
        if i <= 10:
            # Emas (#FFD700)
            return f"<span style='color:#FFD700; font-weight:bold'>{medal}{name}</span>"
        return f"<b>{name}</b>"

    df["decorated_name"] = df.apply(decorate_name, axis=1)

    # Kolom Status: warna dinamis
    def format_status(s):
        if isinstance(s, str) and "running" in s.lower():
            return f"<span style='color:lime;font-weight:bold'>{s}</span>"
        else:
            return f"<span style='color:red;font-weight:bold'>{s}</span>"

    df["status_fmt"] = df["status"].apply(format_status)

    # Susun ulang kolom: No, Name, dst
    df_final = pd.DataFrame()
    df_final["No"] = range(1, len(df) + 1)
    df_final["📛 Name"] = df["decorated_name"]
    df_final["👤 Author"] = df["author"]
    df_final["📝 Description"] = df["desc"]
    df_final["❤️ Likes"] = df["likes"]
    df_final["🕒 Updated"] = df["updated"]
    df_final["⚙️ Status"] = df["status_fmt"]
    df_final["🔗 Visit"] = df["🔗 Visit"]

    return df_final

def render_html_table(status, keyword):
    df = load_data(status, keyword)
    html_table = df.to_html(escape=False, index=False, classes="styled-table")
    return f"""
    <style>
    .styled-table {{
        width: 100%;
        border-collapse: collapse;
        font-size: 1.02rem;
        font-family: 'Segoe UI', sans-serif;
        background-color: #191a22;
        color: #e0e0e0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 24px #00000030;
    }}
    .styled-table th {{
        background: linear-gradient(90deg, #5f0a87 0%, #a4508b 100%);
        text-align: left;
        padding: 12px;
        border-bottom: 3px solid #FFD70080;
        font-size: 1.08rem;
        letter-spacing: 1px;
        color: #ffe29f;
    }}
    .styled-table td {{
        padding: 12px 10px;
        border-bottom: 1px solid #222;
        vertical-align: top;
        font-size: 0.97rem;
    }}
    .styled-table tr:nth-child(even) td {{
        background-color: #1e2030;
    }}
    .styled-table tr:hover td {{
        background-color: #343651;
        transition: background 0.2s;
    }}
    .styled-table td a {{
        color: #FFBF00;
        text-decoration: none;
        font-weight: bold;
        transition: color 0.2s;
    }}
    .styled-table td a:hover {{
        color: #fff700;
    }}
    .styled-table td:first-child {{
        text-align: center;
        font-weight: bold;
        color: #FFD700;
        background: linear-gradient(180deg, #24243e 0%, #191a22 100%);
        border-right: 2px solid #FFD70022;
    }}
    </style>
    {html_table}
    """

css = ""  # CSS sudah di-inject via render_html_table

with gr.Blocks(theme=IndonesiaTheme()) as demo:
    gr.Markdown("""
    <div style='
        background: linear-gradient(90deg, #5f0a87 0%, #a4508b 100%);
        color: #fffde4;
        padding: 36px 8px 22px 8px;
        border-radius: 20px;
        text-align:center;
        font-size:2.0rem;
        font-weight:bold;
        letter-spacing: 1.5px;
        margin-bottom: 16px;
        box-shadow: 0 6px 48px #00000044;'>
    🚀 <span style='color:#FFD700'>100 SPACES TERPOPULER HUGGING FACE! - ⏰ HOURLY UPDATE!!</span> 🚀<br>
    <span style='font-size:1.16rem; font-weight:500; letter-spacing:1px;'>Tersaring dari ribuan aplikasi, hanya yang terbaik, terfavorit, dan paling inovatif yang masuk leaderboard ini!<br>
    Siapkah kamu menemukan Space AI idamanmu hari ini? <span style='color:#ffe29f'>✨</span></span>
    </div>
    """)
    with gr.Row():
        with gr.Column(elem_id="col-left"):
            status_choice = gr.Dropdown(["All", "Running", "Runtime", "Build", "Sleeping"],
                                        label="🎛️ Filter Status", value="All")
        with gr.Column(elem_id="col-mid"):
            keyword_input = gr.Textbox(label="🔍 Search by Name",
                                       placeholder="e.g. llama, tts, image")

    with gr.Column(elem_id="col-bott"):
        output_table = gr.HTML(label="Leaderboard Table")
        gr.Markdown("""
        <div style='
            color:#693f00;
            padding: 24px 6px 18px 6px;
            border-radius: 18px;
            font-size: 1.12rem;
            text-align:center;
            margin-top:18px;
            box-shadow: 0 3px 24px #FFD70033;
            font-weight:bold;
        '>
        🎉 <b>Selamat untuk seluruh Space yang masuk 100 besar! Kalian membanggakan komunitas AI Dunia! 🚀🔥</b><br>
        <span style='font-size:1.55rem;'>Terus berkarya, jangan berhenti berinovasi! 💪🌟🥳</span>
        </div>
        """)
    gr.Button("🔄 Refresh").click(fn=render_html_table,
                                  inputs=[status_choice, keyword_input], outputs=output_table)

    gr.Markdown("#### Made with ❤️ by Deddy | ⏰ HF Most Popular Space Leaderboard", elem_id="footer")

    # Inisialisasi tampilan awal
    output_table.value = render_html_table("All", "")

# Jalankan aplikasi Gradio (local/web)
demo.queue(api_open=False).launch(show_api=False)