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('/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 ---
        # Prüfen, ob der User wirklich eingeloggt ist. 
        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
        
        with ui.card().classes('w-150 items-center mt-10 justify-center'):
            ui.label('Neues Spiel für '+ systemname + " eintragen").classes('text-2xl font-bold')

            ui.space()

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

            ui.space()

            with ui.column().classes("w-full items-center h-60"):
                # 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 (Dictionary) für NiceGUI bauen
                dropdown_options = {}

                for p in raw_players:
                    # FILTERN: Wenn die ID des Spielers MEINE EIGENE ID ist, überspringen wir ihn!
                    if p['player_id'] == my_id:
                        continue  # Geht sofort zum nächsten Spieler in der Schleife

                    # Die ID wird der Schlüssel, der kombinierte Name wird der Anzeigetext
                    # Ergebnis sieht z.B. so aus: { 2: "Dummy Mc DummDumm aka dummy_user" }
                    dropdown_options[p['player_id']] = f"{p['display_name']} aka {p['discord_name']}"

                # 4. Eigene Punkte eintragen
                p1_points = ui.slider(min= 0, max=100, value = 10).props("label-always")

                ui.space()

                # 5. Das Dropdown mit unseren sauberen Optionen füttern
                ui.label("Gegner:").classes('text-xl font-bold')
                opponent_select = ui.select(options=dropdown_options, label='Gegner auswählen').classes('w-64')
                p2_points = ui.slider(min= 0, max=100, value = 10).props("label-always")

            ui.space()

            def input_match_to_database():
                # 1. Prüfen, ob ein Gegner ausgewählt wurde
                p2_id = opponent_select.value
                if p2_id is None:
                    ui.notify("Bitte wähle zuerst einen Gegner aus!", color="red", position="top")
                    return # Bricht die Funktion hier ab!

                # 2. Punkte von den Slidern holen
                score_p1 = p1_points.value
                score_p2 = p2_points.value

                # 3. Daten an die API schicken (my_id haben wir oben schon von app.storage.user geholt)
                data_api.add_new_match(systemname, my_id, p2_id, score_p1, score_p2)

                # 4. Erfolgsmeldung und zurück zur Übersicht
                ui.notify("Match erfolgreich eingetragen!", color="green")
                ui.navigate.to('/')

            with ui.row().classes("w-full items-center justify-between"):
                ui.button('Cancel', on_click=lambda: ui.navigate.to('/')).classes('bg-gray-500 text-white')
                ui.button(text="Absenden", color="positive", on_click=lambda: input_match_to_database()).classes("")