import gradio as gr
import pandas as pd

from support.database import get_stats
from support.utils import display_model_name, format_game_history_html


def create_model_stats_table(model_stats):
    """Create a DataFrame for model statistics"""
    if not model_stats:
        return pd.DataFrame()

    data = []
    for model, stats in model_stats.items():
        win_rate = (stats['wins'] / stats['games'] * 100) if stats['games'] > 0 else 0
        data.append({
            'Model': display_model_name(model),
            'Games': stats['games'],
            'Wins': stats['wins'],
            'Losses': stats['losses'],
            'Win Rate': f"{win_rate:.1f}%"
        })

    df = pd.DataFrame(data)
    df = df.sort_values('Games', ascending=False)
    return df


# def create_provider_stats_table(provider_stats):
#     """Create a DataFrame for provider statistics"""
#     data = []
#     for provider, stats in provider_stats.items():
#         if stats['games'] > 0:
#             win_rate = (stats['wins'] / stats['games'] * 100) if stats['games'] > 0 else 0
#             data.append({
#                 'Provider': provider.title(),
#                 'Games': stats['games'],
#                 'Wins': stats['wins'],
#                 'Losses': stats['losses'],
#                 'Win Rate': f"{win_rate:.1f}%"
#             })

#     df = pd.DataFrame(data)
#     df = df.sort_values('Games', ascending=False)
#     return df
def create_provider_stats_html(provider_stats):
    html = """
    <table class="provider-table">
        <tr>
            <th>Provider</th>
            <th>Games</th>
            <th>Wins</th>
            <th>Losses</th>
            <th>Win Rate</th>
        </tr>
    """

    for provider, stats in provider_stats.items():
        if stats['games'] == 0:
            continue

        win_rate = (stats['wins'] / stats['games']) * 100
        logo_url = f"/gradio_api/file=assets/providers/{provider}.png"   # <= adjust path

        html += f"""
        <tr>
            <td class="logo_cell"><img src="{logo_url}" class="provider-logo"> {provider.title()}</td>
            <td>{stats['games']}</td>
            <td>{stats['wins']}</td>
            <td>{stats['losses']}</td>
            <td>{win_rate:.1f}%</td>
        </tr>
        """

    html += "</table>"
    return html


def load_stats():
    """Load and format all statistics"""
    stats = get_stats()

    total_games = stats['total_games']
    game_history_html = format_game_history_html(stats['game_history'])
    model_df = create_model_stats_table(stats['model_stats'])
    # provider_df = create_provider_stats_table(stats['provider_stats'])
    provider_df = create_provider_stats_html(stats['provider_stats'])

    html_played_games = f"""
        <div class="played-games-container">
            <div class="played-games-label">🎮 PLAYED GAMES</div>
            <div class="played-games-count">{total_games}</div>
        </div>
    """

    html_played_games = f"""
        <div class="stats-card">
            <div class="stats-icon">🎮</div>
            <div class="stats-content">
                <div class="stats-label">Total Games Played</div>
                <div class="stats-value">{total_games}</div>
            </div>
        </div>
    """

    return html_played_games, game_history_html, model_df, provider_df


# Create the Gradio interface
with gr.Blocks(elem_id="stats_container") as demo:

    with gr.Row(elem_classes="games_played"):
        gr.HTML("""
            <div style="display: flex; align-items: center; gap: 20px; margin-left: 1%; margin-right: 1%;">
                <h1 style="margin: 0;">📊 Statistics Dashboard</h1>
                <button onclick='refreshStats()' class='custom-refresh-btn'>
                    🔄 Refresh Stats
                </button>
            </div>
        """)
        refresh_btn = gr.Button("🔄 Refresh Stats", variant="primary", size="sm", elem_classes="refresh_btn", visible=True, elem_id="refresh_btn")

    with gr.Row():
        total_games_display = gr.HTML()

    with gr.Tabs(elem_id="stats_tabs"):
        with gr.Tab("🎮 Game History"):
            game_history_display = gr.HTML(label="Game History")

        with gr.Tab("🤖 Model Statistics", elem_classes="model_stats_tab"):
            gr.Markdown("### Individual Model Performance", elem_classes="stats_title")
            model_stats_table = gr.Dataframe(
                label="Model Statistics",
                interactive=False,
                wrap=True,
                elem_classes="stats_table"
            )

        with gr.Tab("🏢 Provider Statistics", elem_classes="grouped_stats_tab"):
            gr.Markdown("### Provider Performance (Grouped)", elem_classes="stats_title")
            # provider_stats_table = gr.Dataframe(
            #     label="Provider Statistics",
            #     interactive=False,
            #     wrap=True,
            #     elem_classes="stats_table"
            # )
            provider_stats_table = gr.HTML(label="Provider Stats")

    # Load stats on page load
    demo.load(
        fn=load_stats,
        outputs=[total_games_display, game_history_display, model_stats_table, provider_stats_table]
    )

    # Refresh button
    refresh_btn.click(
        fn=load_stats,
        outputs=[total_games_display, game_history_display, model_stats_table, provider_stats_table]
    )

if __name__ == "__main__":
    demo.launch()