@page "/manage-UserRole"
@layout AdminLayout
@inject UserAPIConsumer userAPIConsumer
@inject RoleAPIConsumer roleAPIConsumer
@using Auth.Contracts

<div class="overflow-x-auto p-4">
    <table class="table table-zebra table-bordered w-full">
        <thead>
            <tr class="text-center bg-base-200">
                <th colspan="3" class="text-xl p-4">صلاحيات الوصول للتطبيق</th>
            </tr>
            <tr>
                <th>الأسم</th>
                @* <th>الوظيفة</th> *@
                <th>الصلحيات</th>
                <th>أضف صلاحية</th>
            </tr>
        </thead>
        <tbody>
            @if (users != null)
            {
                @foreach (var user in users)
                {
                    <tr>
                        <td>@user.Name</td>
                        @* <td>@user.JobTitle</td> *@
                        <td>
                            <div class="flex flex-wrap gap-2">
                                @foreach (var role in user.Roles)
                                {
                                    <div class="badge badge-success gap-2">
                                        <span>@role</span>
                                        <button class="btn btn-xs btn-circle btn-ghost" @onclick="() => RemoveRole(user, role)"
                                            type="button">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24"
                                                stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                        </button>
                                    </div>
                                }
                            </div>
                        </td>
                        <td>
                            <AddRolePopUp UserVM="user" AddMethod="AddRole"></AddRolePopUp>
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

@code {

    List<UserVM> users = new List<UserVM>();
    List<string> roles = new List<string>();

    protected override async Task OnInitializedAsync()
    {
        users = await userAPIConsumer.GetUsers();
        users ??= new List<UserVM>();
        roles = Enum.GetNames<AppEnum.Roles>().ToList();
    }

    async Task AddRole()
    {
        StateHasChanged();
    }

    async Task RemoveRole(UserVM user, string role)
    {
        var result = await roleAPIConsumer.RemoveUserFromRole(user.Id, role);
        if (result)
        {
            user.Roles.Remove(role);
        }
        else
        {
            // Error handling logic if needed
        }
    }
}