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

def setup_routes():

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

        # --- SICHERHEITS-CHECK ---
        if not app.storage.user.get('authenticated', False):
            ui.label('Access Denied. Please log in first.').classes('text-red-500')
            ui.button('Back to Home', on_click=lambda: ui.navigate.to('/'))
            return

        # ÄNDERUNG: w-full (für Handy) + max-w-md (für PC) + mx-auto (Zentrieren) + p-6 (Innenabstand)
        with ui.card().classes('w-full max-w-md mx-auto items-center mt-10 p-6 shadow-xl'):

            # Text-Center hinzugefügt, falls der Systemname sehr lang ist und auf dem Handy umbricht
            ui.label(f'Neues Spiel für {systemname} eintragen').classes('text-2xl font-bold text-center mb-6')

            ui.label("Meine Punkte:").classes('text-xl font-bold w-full text-left')

            # ÄNDERUNG: h-60 entfernt, stattdessen gap-6 (Abstand zwischen den Elementen)
            with ui.column().classes("w-full items-center gap-6"):

                # 1. Daten aus der DB holen
                raw_players = data_api.get_all_players_from_system(systemname)
                my_id = app.storage.user.get('db_id')

                # 3. Eine saubere Optionen-Liste für NiceGUI bauen
                dropdown_options = {}

                for p in raw_players:
                    if p['player_id'] == my_id:
                        continue  
                    dropdown_options[p['player_id']] = f"{p['display_name']} aka {p['discord_name']}"

                # ÄNDERUNG: .classes('w-full') hinzugefügt, damit der Slider sich anpasst
                p1_points = ui.slider(min=0, max=100, value=10).props("label-always").classes('w-full')

                ui.separator().classes('w-full mt-4') # Ein schöner Trennstrich für die Optik

                # 5. Dropdown und Gegner Punkte
                ui.label("Gegner:").classes('text-xl font-bold w-full text-left')

                # ÄNDERUNG: w-64 durch w-full ersetzt
                opponent_select = ui.select(options=dropdown_options, label='Gegner auswählen').classes('w-full')

                # ÄNDERUNG: .classes('w-full') hinzugefügt
                p2_points = ui.slider(min=0, max=100, value=10).props("label-always").classes('w-full')

            ui.space()

            # Das Match in die Datenbank eintragen lassen und die MMR Berechnung triggern.
            def input_match_to_database():
                p2_id = opponent_select.value
                if p2_id is None:
                    ui.notify("Bitte wähle zuerst einen Gegner aus!", color="red", position="top")
                    return 

                score_p1 = p1_points.value
                score_p2 = p2_points.value

                match_id = data_api.add_new_match(systemname, my_id, p2_id, score_p1, score_p2)

                # 4. Erfolgsmeldung und Berechnung
                ui.notify("Match erfolgreich eingetragen!", color="green")
                calc_match.calculate_inserted_match(systemname, match_id)
                ui.navigate.to('/')

            # Buttons ganz unten in einer Reihe
            with ui.row().classes("w-full items-center justify-between mt-8"):
                ui.button('Cancel', on_click=lambda: ui.navigate.to(f'/statistic/{systemname}')).classes('bg-gray-500 text-white')
                ui.button(text="Absenden", color="positive", on_click=lambda: input_match_to_database())