Liga-System/gui/main_gui.py

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

def setup_routes():
    @ui.page('/')
    def home_page():
        gui_style.apply_design()

        # --- NAVIGATIONSLEISTE (HEADER) ---
        with ui.header().classes('items-center justify-between bg-zinc-900 p-4 shadow-lg'):

            # --- LINKE SEITE ---
            # Vereinslogo und den Titel in einer eigenen Reihe (Reihe 1)
            with ui.row().classes('items-center gap-4'):
                ui.image("gui/pictures/wsdg.png").classes('w-20 h-20 rounded-full')
                ui.label('Diceghost Liga').classes('text-2xl font-bold text-white')

            # --- RECHTE SEITE ---
            if app.storage.user.get('authenticated', False):
                with ui.row().classes('items-center gap-4'):
                    discord_name = app.storage.user.get('discord_name')
                    display_name = app.storage.user.get('display_name') 
                    player_id = app.storage.user.get('db_id')

                    # 1. Wir definieren eine kleine Funktion, die zwischen Text und Eingabe hin- und herschaltet
                    def toggle_edit_mode():
                        display_row.visible = not display_row.visible
                        edit_row.visible = not edit_row.visible

                    # --- ANSICHT 1: Der normale Text mit Edit-Button ---
                    with ui.row().classes('items-center gap-2') as display_row:
                        ui.label(display_name).classes('text-xl font-bold text-white')
                        ui.label('aka').classes('text-sm text-gray-500')
                        ui.label(discord_name).classes('text-lg text-gray-400')

                        # Ein runder Button (.props('round')), der exakt wie ein FAB aussieht!
                        ui.button(icon='edit', color='primary', on_click=toggle_edit_mode).props('round dense')

                    # --- ANSICHT 2: Das Eingabefeld (startet unsichtbar!) ---
                    with ui.row().classes('items-center gap-2') as edit_row:
                        edit_row.visible = False # Am Anfang verstecken

                        def save_new_name():
                            new_name = name_input.value
                            # Nur speichern, wenn ein Name drinsteht und er anders ist als vorher
                            if new_name and new_name != display_name:
                                data_api.change_display_name(db_id, new_name) # Deine DB Funktion
                                app.storage.user['display_name'] = new_name
                                ui.notify('Name gespeichert!', color='positive')
                                ui.navigate.reload()
                            else:
                                # Wenn nichts geändert wurde, einfach wieder einklappen
                                toggle_edit_mode()

                        name_input = ui.input('Neuer Name', value=display_name).on('keydown.enter', save_new_name)
                        ui.button(icon='save', color='positive', on_click=save_new_name).props('round dense')
                        ui.button(icon='close', color='negative', on_click=toggle_edit_mode).props('round dense')
                    # ---------------------------------------------

                    avatar = app.storage.user.get('avatar_url')
                    if avatar:
                        ui.image(avatar).classes('w-12 h-12 rounded-full border-2 border-red-500')

                    def logout():
                        app.storage.user.clear()
                        ui.navigate.to('/')

                    ui.button('Logout', on_click=logout).classes('bg-red-500 text-white')

            else:
                auth_url = discord_login.get_auth_url()
                ui.button('Login with Discord', on_click=lambda: ui.navigate.to(auth_url))
        # ----------------------------------


        # --- Spielsysteme ---
        if app.storage.user.get('authenticated', False):
            with ui.card().classes("w-full"):
                ui.label(text="Meine Ligaplätze").classes("font-bold text-white text-xl")
                
                placements = data_api.get_player_statistics(player_id)
                systems = data_api.get_gamesystem_data()

                def click_join_league(p_id, sys_id):
                    data_api.join_league(p_id, sys_id)
                    ui.navigate.to("/")

                with ui.grid(columns=3).classes("w-full gap-4 items-center"):
                    for place in placements:
                        sys_card = ui.card().classes("h-60 w-full items-center justify-center transition-colors")

                        with sys_card:
                            # Kopfzeile der Karte (Name & Beschreibung)
                            ui.label(text=place['gamesystem_name']).classes('text-xl font-bold')

                            if 'description' in place and place['description']:
                                ui.label(text=place['description']).classes('text-xs text-gray-400')

                            ui.space()

                            if place['mmr'] is None:
                                ui.label(text="Du bist noch nicht in dieser Liga.").classes("text-red-500 font-bold")

                                # --- HIER IST DER MAGISCHE TRICK ---
                                # Das 'e' fängt das NiceGUI-Event ab und wirft es weg.
                                # p=player_id und s=place['gamesystem_id'] frieren die IDs für DIESEN Button bombenfest ein!
                                ui.button("Liga Beitreten", on_click=lambda e, p=player_id, s=place['gamesystem_id']: click_join_league(p, s))

                            else:
                                # Spieler IST in der Liga! 
                                sys_card.classes("cursor-pointer hover:bg-zinc-800")
                                # Auch hier machen wir es mit dem 'e' absolut sicher:
                                sys_card.on('click', lambda e, name=place['gamesystem_name']: ui.navigate.to(f'/statistic/{name}'))

                                # Wir zeigen die Stats.
                                with ui.row().classes('items-center gap-4'):
                                    ui.label(text=f"MMR: {place['mmr']}")
                                    ui.label(text=f"Spiele: {place['games_in_system']}")
                                    ui.label(text=f"Punkte: {place['points']}")