import gradio as gr
import sqlite3
import pandas as pd
from themes import IndonesiaTheme  # Tema custom

DB_PATH = "spaces.db"

def load_data(status_filter="All", keyword=""):
    conn = sqlite3.connect(DB_PATH)
    query = "SELECT name, author, desc, likes, updated, status, link FROM spaces"
    df = pd.read_sql_query(query, conn)
    conn.close()

    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(20)

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

    # Kolom Name: bold
    df["name"] = df["name"].apply(lambda name: f"<b>{name}</b>")

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

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

    # Susun ulang kolom
    df = df[["name", "author", "desc", "likes", "updated", "status", "🔗 Visit"]]
    df.columns = ["📛 Name", "👤 Author", "📝 Description", "❤️ Likes", "🕒 Updated", "⚙️ Status", "🔗 Visit"]


    return df.reset_index(drop=True)

def view_leaderboard(status, keyword):
    return load_data(status, keyword)

css = """
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.92rem;
}

th {
    background: #f0f0f0;
    padding: 8px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}

td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

tr:hover {
    background-color: #f9f9f9;
}

td a {
    text-decoration: none;
    color: #1e90ff;
    font-weight: bold;
}
"""


# === Gradio App UI ===
with gr.Blocks(theme=IndonesiaTheme()) as demo:
    with gr.Column():
        gr.Markdown("## 🌌 HuggingFace Spaces Leaderboard")
        gr.Markdown("🎯 Menampilkan 20 space dengan jumlah like terbanyak + link kunjungan langsung")

        with gr.Row():
            with gr.Column(elem_id="col-left"):
                status_choice = gr.Dropdown(["All", "Running", "Zero", "Stopped"],
                                            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")

        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: 0.9rem;
                font-family: 'Segoe UI', sans-serif;
                background-color: #1e1e1e;
                color: #e0e0e0;
            }}
            .styled-table th {{
                background-color: #2e2e2e;
                text-align: left;
                padding: 10px;
                border-bottom: 2px solid #444;
            }}
            .styled-table td {{
                padding: 10px;
                border-bottom: 1px solid #333;
                vertical-align: top;
            }}
            .styled-table tr:hover td {{
                background-color: #2a2a2a;
            }}
            a {{
                color: #4da6ff;
                text-decoration: none;
                font-weight: bold;
            }}
            </style>
            {html_table}
            """


        status_choice.change(fn=render_html_table, inputs=[status_choice, keyword_input], outputs=output_table)
        keyword_input.change(fn=render_html_table, inputs=[status_choice, keyword_input], outputs=output_table)
        gr.Button("🔄 Refresh").click(fn=render_html_table,
                                      inputs=[status_choice, keyword_input], outputs=output_table)

        gr.Markdown("#### Made with ❤️ by Deddy | HuggingFace Leaderboard Mirror", elem_id="footer")

demo.launch()