@page "/superadmin/users/{UserId:guid}"
@layout SuperAdminLayout
@inherits SuperAdminBase
@inject IamApiService IamApi
@using WebClientTpos.Client.Services

<PageTitle>Chi tiết người dùng — aPOS Super Admin</PageTitle>

<div class="sa-topbar">
    <div class="sa-topbar__left">
        <div style="display:flex;align-items:center;gap:12px;">
            <a href="/superadmin/users" style="color:var(--sa-text-tertiary);text-decoration:none;">
                <i data-lucide="arrow-left" style="width:18px;height:18px;"></i>
            </a>
            <div>
                <h1 class="sa-topbar__title">@(_user?.FullName ?? _user?.Email ?? "Đang tải...")</h1>
                <p class="sa-topbar__subtitle">@_user?.Email</p>
            </div>
        </div>
    </div>
</div>

<div class="sa-content">
    @if (_user == null)
    {
        <div class="sa-panel"><div class="sa-panel__body" style="text-align:center;padding:48px;"><p style="color:var(--sa-text-tertiary);">Đang tải...</p></div></div>
    }
    else
    {
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
            @* Profile Info *@
            <div class="sa-panel">
                <div class="sa-panel__header">
                    <h3 class="sa-panel__title">Thông tin tài khoản</h3>
                </div>
                <div class="sa-panel__body" style="display:flex;flex-direction:column;gap:8px;">
                    @InfoRow("Họ", _user.FirstName)
                    @InfoRow("Tên", _user.LastName)
                    @InfoRow("Email", _user.Email)
                    @InfoRow("Trạng thái", _user.Status ?? "Active")
                    @InfoRow("Ngày tạo", _user.CreatedAt.ToString("dd/MM/yyyy HH:mm"))
                    @InfoRow("Đăng nhập cuối", _user.LastLoginAt?.ToString("dd/MM/yyyy HH:mm") ?? "Chưa đăng nhập")
                </div>
            </div>

            @* Roles *@
            <div class="sa-panel">
                <div class="sa-panel__header">
                    <h3 class="sa-panel__title">Vai trò</h3>
                </div>
                <div class="sa-panel__body">
                    @if (_roles.Any())
                    {
                        <div style="display:flex;flex-wrap:wrap;gap:8px;">
                            @foreach (var role in _roles)
                            {
                                <div style="display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--sa-bg-interactive);border-radius:8px;">
                                    <span class="sa-badge sa-badge--info">@role</span>
                                    <button style="background:none;border:none;color:var(--sa-danger);cursor:pointer;padding:2px;font-size:14px;"
                                            @onclick="() => RemoveRoleAsync(role)" title="Xóa vai trò">×</button>
                                </div>
                            }
                        </div>
                    }
                    else
                    {
                        <p style="font-size:13px;color:var(--sa-text-tertiary);">Chưa có vai trò nào</p>
                    }

                    <div style="margin-top:16px;display:flex;gap:8px;">
                        <select @bind="_newRole" style="background:var(--sa-bg-interactive);border:1px solid var(--sa-border);color:var(--sa-text-primary);padding:6px 12px;border-radius:6px;font-size:13px;">
                            <option value="">Chọn vai trò...</option>
                            @foreach (var r in _allRoles.Where(r => !_roles.Contains(r.Name)))
                            {
                                <option value="@r.Name">@r.Name</option>
                            }
                        </select>
                        <button class="sa-btn-primary" style="font-size:12px;padding:6px 12px;" disabled="@string.IsNullOrEmpty(_newRole)" @onclick="AssignRoleAsync">
                            Gán vai trò
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@code {
    [Parameter] public Guid UserId { get; set; }

    private IamApiService.UserListDto? _user;
    private List<string> _roles = new();
    private List<IamApiService.RoleDto> _allRoles = new();
    private string _newRole = "";

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        _user = await IamApi.GetUserByIdAsync(UserId);
        _roles = await IamApi.GetUserRolesAsync(UserId);
        _allRoles = await IamApi.GetRolesAsync();
    }

    private async Task AssignRoleAsync()
    {
        if (string.IsNullOrEmpty(_newRole)) return;
        await IamApi.AssignRoleAsync(UserId, _newRole);
        _roles = await IamApi.GetUserRolesAsync(UserId);
        _newRole = "";
    }

    private async Task RemoveRoleAsync(string role)
    {
        await IamApi.RemoveRoleAsync(UserId, role);
        _roles = await IamApi.GetUserRolesAsync(UserId);
    }

    private static RenderFragment InfoRow(string label, string? value) => builder =>
    {
        builder.OpenElement(0, "div");
        builder.AddAttribute(1, "style", "display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--sa-border-subtle);");
        builder.OpenElement(2, "span");
        builder.AddAttribute(3, "style", "font-size:13px;color:var(--sa-text-tertiary);");
        builder.AddContent(4, label);
        builder.CloseElement();
        builder.OpenElement(5, "span");
        builder.AddAttribute(6, "style", "font-size:13px;color:var(--sa-text-primary);font-weight:500;");
        builder.AddContent(7, value ?? "—");
        builder.CloseElement();
        builder.CloseElement();
    };
}
