@page "/"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using GmRelay.Web.Services
@attribute [Authorize]
@inject SessionService SessionService
@inject AuthenticationStateProvider AuthStateProvider

<PageTitle>Панель управления — GM-Relay</PageTitle>

<div class="page-container">
    <div class="page-header animate-fade-in">
        <h2>Добро пожаловать, @userName! 👋</h2>
        <p>Выберите группу для управления игровыми сессиями.</p>
    </div>

    @if (groups == null)
    {
        <div class="card-grid">
            @for (int i = 0; i < 3; i++)
            {
                <div class="skeleton skeleton-card"></div>
            }
        </div>
    }
    else if (groups.Count == 0)
    {
        <div class="glass-card">
            <div class="empty-state">
                <div class="empty-state-icon">🤖</div>
                <div class="empty-state-title">Нет зарегистрированных групп</div>
                <p class="empty-state-text">Добавьте бота GM-Relay в свою группу Telegram, чтобы начать управлять игровыми сессиями.</p>
            </div>
        </div>
    }
    else
    {
        <div class="card-grid stagger-children">
            @foreach (var group in groups)
            {
                <div class="glass-card group-card">
                    <div class="group-card-icon">🎮</div>
                    <h3 class="group-card-title">@group.Name</h3>
                    <p class="group-card-id">ID: @group.TelegramChatId</p>
                    <a href="/group/@group.Id" class="btn-gm btn-gm-primary" style="width: 100%; justify-content: center; margin-top: auto;">
                        Посмотреть игры →
                    </a>
                </div>
            }
        </div>
    }
</div>

<style>
    .group-card {
        display: flex;
        flex-direction: column;
        min-height: 180px;
    }

    .group-card-icon {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .group-card-title {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--text-primary);
    }

    .group-card-id {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-family: 'Courier New', monospace;
        margin-bottom: 1rem;
    }
</style>

@code {
    private List<WebGameGroup>? groups;
    private string userName = "";

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;
        userName = user.Identity?.Name ?? "Мастер Игры";

        var telegramIdClaim = user.FindFirst("TelegramId")?.Value;
        if (long.TryParse(telegramIdClaim, out var telegramId))
        {
            groups = await SessionService.GetGroupsForGmAsync(telegramId);
        }
    }
}