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}', dark=True)
    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")
                ui.navigate.to(f'/statistic/{systemname}')


            with ui.dialog().classes("w-full items-center") as form_info, ui.card():
                    ui.label('Um ein Spiel einzutragen einfach deine erspielten Punkte, deinen Gegner und die Punkte von deinem Gegner eintragen').classes("font-bold text-white text-l")
                    ui.label('ACHTUNG: Damit ein Spieler als Gegner ausgewählt werden kann, muss er der Liga beigetreten sein!').classes("font-bold text-white text-l")
                    ui.label('Nach dem Absenden muss dein Gegner in seiner Liga App das Spiel noch kurz bestätigen. Solltest du einen Fehler gemacht haben, kannst du das Spiel (bevor es bestätigt wurde) auf der Hauptseite selber löschen.').classes("font-bold text-white text-l")
                    ui.button(icon="close", on_click=form_info.close).classes("w-10 h-8 rounded-full")

            # Buttons ganz unten in einer Reihe
            with ui.row().classes("w-full items-center justify-between mt-8"):
                ui.button(icon="close", on_click=lambda: ui.navigate.to(f'/statistic/{systemname}')).classes("w-10 h-8 rounded-full")
                ui.button(icon="help", color="information" ,on_click=form_info.open).classes("w-10 h-8 rounded-full")
                ui.button(text="Absenden", color="positive", on_click=lambda: input_match_to_database())