from nicegui import ui, app
from gui import gui_style
from data import data_api

def setup_routes():
    # 1. Die {}-Klammern definieren eine dynamische Variable in der URL
    @ui.page('/statistic/{systemname}')
    def gamesystem_statistic_page(systemname: str): # <--- WICHTIG: Hier fangen wir das Wort aus der URL auf!

        # Sicherheitscheck: Ist der User eingeloggt?
        if not app.storage.user.get('authenticated', False):
            ui.navigate.to('/')
            return

        gui_style.apply_design()

        player_id = app.storage.user.get('db_id')
        stats = data_api.get_player_system_stats(player_id, systemname)

        if stats:
            with ui.header().classes('items-center justify-between bg-zinc-900 p-4 shadow-lg'):
                ui.button('Zurück zur Übersicht', on_click=lambda: ui.navigate.to('/'))
                ui.button("Spiel eintragen", on_click=lambda: ui.navigate.to(f'/add-match/{systemname}'))
            
            with ui.column().classes('w-full items-center mt-10'):
                ui.label(f'Deine Statistik in {systemname}').classes('text-5xl font-bold text-blue-400')

            
            # --- BLOCK 1 (2 Karten) ---
            with ui.card().classes("w-full"):
                with ui.element('div').classes("w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4"):

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("MMR Punkte: ").classes('text-2xl font-bold')
                        ui.label(str(stats["mmr"])).classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Rang: ").classes('text-2xl font-bold')
                        ui.label("-").classes('text-4xl font-bold text-blue-100')
        
            # --- BLOCK 2 (5 Karten) ---
            with ui.card().classes("w-full"):
                with ui.element('div').classes("w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"):

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Spiele: ").classes('text-2xl font-bold')
                        ui.label(str(stats["games_in_system"])).classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Ø Punkte pro Spiel: ").classes('text-2xl font-bold')
                        ui.label(str(stats["avv_points"])).classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Win-Rate: ").classes('text-2xl font-bold')
                        ui.label("-").classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Letztes Spiel am: ").classes('text-2xl font-bold')
                        # Schneidet die Zeit vom Datum ab, falls eins existiert
                        last_played = str(stats["last_played"])[:10] if stats["last_played"] else "-"
                        ui.label(last_played).classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Win-Streak: ").classes('text-2xl font-bold')
                        ui.label("-").classes('text-4xl font-bold text-blue-100')

            # --- BLOCK 3 (3 Karten) ---
            with ui.card().classes("w-full"):
                with ui.element('div').classes("w-full grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4"):

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Dein Nemesis: ").classes('text-2xl font-bold')
                        ui.label("-").classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Meisten Spiele mit: ").classes('text-2xl font-bold')
                        ui.label("-").classes('text-4xl font-bold text-blue-100')

                    with ui.card().classes("items-center justify-center text-center"):
                        ui.label("Dein 'Prügelknabe': ").classes('text-2xl font-bold')
                        ui.label("-").classes('text-4xl font-bold text-blue-100')


            # --- BLOCK 4 (Diagramm der letzten 20 Spiele) ---
            with ui.card().classes("w-full items-center"):
                ui.label("Punkte in den letzten 20 Spielen").classes('text-2xl font-bold mb-4')

                # 1. Daten aus der API holen
                chart_data = data_api.get_last_20_match_scores(player_id, systemname)

                # 2. Nur zeichnen, wenn es überhaupt schon Spiele gibt!
                if len(chart_data['points']) > 0:
                    ui.echart({
                        'xAxis': {
                            'type': 'category', 
                            'data': chart_data['labels'],
                            'axisLabel': {'color': '#e5e7eb'} 
                        },
                        'yAxis': {
                            'type': 'value',
                            'axisLabel': {'color': '#e5e7eb'},
                            'splitLine': {'lineStyle': {'color': '#3f3f46'}}
                        },
                        'series': [
                            {
                                'name': 'Punkte', # Zeigt im Tooltip "Punkte: 76" statt einer unbenannten Zahl
                                'type': 'line', 
                                'data': chart_data['points'], 
                                'smooth': True, 
                                'color': '#60a5fa' 
                            }
                        ],
                        'tooltip': {
                            'trigger': 'axis',
                            'backgroundColor': '#27272a',
                            'textStyle': {'color': '#ffffff'},
                            'borderColor': '#3f3f46' # Ein feiner Rand für den Kasten
                        }
                    }).classes('w-full h-64')


        else:
            ui.label("Keine Statistiken für dieses System gefunden.").classes('text-red-500 mt-4')