from nicegui import ui, app
from data import data_api
# Falls du eine gui_style.py für Farben/Header hast, hier importieren!
# from gui import gui_style 

def setup_routes():
    @ui.page('/matchhistory', dark=True)
    def match_history_page():

        gui_style.apply_design()

        # Sicherheits-Check: Ist der Nutzer eingeloggt?
        if not app.storage.user.get('authenticated', False):
            ui.label('Bitte logge dich ein.').classes('text-red-500 text-2xl m-4')
            return

        player_id = app.storage.user.get('db_id')

        # Das Haupt-Layout der Seite
        with ui.column().classes('w-full max-w-5xl mx-auto p-4'):

            # Kopfbereich mit Zurück-Button
            with ui.row().classes('w-full items-center justify-between mb-6'):
                ui.label("Komplette Match Historie").classes("text-3xl font-bold text-white")
                ui.button("Zurück", icon="arrow_back", on_click=lambda: ui.navigate.to('/')).classes('bg-zinc-700 text-white')

            raw_matches = data_api.get_match_history_log(player_id)
            table_rows = []

            # Daten für die Tabelle aufbereiten
            for i, match in enumerate(raw_matches):
                # Bin ich P1 oder P2?
                if match['player1_id'] == player_id:
                    opponent = f"{match['p2_display']} aka {match['p2_discord']}"
                    my_score = match['score_player1']
                    opp_score = match['score_player2']
                    my_mmr_change = match['player1_mmr_change']
                else:
                    opponent = f"{match['p1_display']} aka {match['p1_discord']}"
                    my_score = match['score_player2']
                    opp_score = match['score_player1']
                    my_mmr_change = match['player2_mmr_change']

                # Ergebnis Text
                if my_score > opp_score:
                    result = "Gewonnen"
                elif my_score < opp_score:
                    result = "Verloren"
                else:
                    result = "Unentschieden"

                # MMR Text schön formatieren
                if match['match_is_counted'] == 0:
                    mmr_text = "Ausstehend"
                elif my_mmr_change is None:
                    mmr_text = "0"
                elif my_mmr_change > 0:
                    mmr_text = f"+{my_mmr_change}"
                else:
                    mmr_text = str(my_mmr_change)

                table_rows.append({
                    'id': i,
                    'date': str(match['played_at'])[:10],
                    'system': match['gamesystem_name'],
                    'opponent': opponent,
                    'score': f"{my_score} : {opp_score}",
                    'result': result,
                    'mmr': mmr_text
                })

            # Spalten definieren
            columns = [
                {'name': 'date', 'label': 'Datum', 'field': 'date', 'align': 'left'},
                {'name': 'system', 'label': 'System', 'field': 'system', 'align': 'left'},
                {'name': 'opponent', 'label': 'Gegner', 'field': 'opponent', 'align': 'left'},
                {'name': 'score', 'label': 'Punkte', 'field': 'score', 'align': 'center'},
                {'name': 'result', 'label': 'Ergebnis', 'field': 'result', 'align': 'left'},
                {'name': 'mmr', 'label': 'MMR Änderung', 'field': 'mmr', 'align': 'right'}
            ]

            # Tabelle zeichnen
            if len(table_rows) > 0:
                history_table = ui.table(columns=columns, rows=table_rows, row_key='id').classes('w-full bg-zinc-900 text-white')

                # KLEINER TRICK: Wir färben die MMR-Spalte grün oder rot, je nachdem ob da ein "+" oder "-" steht!
                history_table.add_slot('body-cell-mmr', '''
                    <q-td :props="props">
                        <span :class="{'text-green-500 font-bold': props.row.mmr.startsWith('+'), 'text-red-500 font-bold': props.row.mmr.startsWith('-'), 'text-gray-400 italic': props.row.mmr === 'Ausstehend'}">
                            {{ props.row.mmr }}
                        </span>
                    </q-td>
                ''')
            else:
                ui.label("Keine Spiele gefunden.").classes("text-gray-400 italic")