@page "/admin/roles"
@layout AdminLayout
@inherits AdminBase
@inject WebClientTpos.Client.Services.IamApiService IamService
@inject IDialogService DialogService
@inject ISnackbar Snackbar
@using WebClientTpos.Client.Services
@using MudBlazor

@*
    EN: Role permissions — real roles from IAM Service API with full CRUD.
    VI: Phân quyền — dữ liệu roles thật từ IAM Service API với CRUD đầy đủ.
*@

<PageTitle>Phân quyền — aPOS Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Phân quyền</h1>
        <p class="admin-topbar__subtitle">Quản lý vai trò và quyền truy cập</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-primary" @onclick="ShowCreateDialog">
            <i data-lucide="plus"></i>
            <span>Tạo vai trò</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
@if (_loading)
{
    <div class="admin-content" style="display:flex;align-items:center;justify-content:center;min-height:300px;">
        <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
    </div>
}
else if (!_roles.Any())
{
    <div class="admin-content" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:12px;">
        <i data-lucide="shield" style="width:48px;height:48px;color:var(--admin-text-tertiary);"></i>
        <span style="color:var(--admin-text-tertiary);font-size:15px;">Chưa có vai trò nào</span>
        <span style="color:var(--admin-text-tertiary);font-size:13px;">Nhấn "Tạo vai trò" để bắt đầu</span>
    </div>
}
else
{
    <div class="admin-content" style="display:flex;gap:24px;">
        @* LEFT: Roles list *@
        <div style="width:280px;display:flex;flex-direction:column;gap:8px;">
            @foreach (var role in _roles)
            {
                <button class="admin-role-card @(_selectedId == role.Id ? "admin-role-card--active" : "")"
                        @onclick="@(() => SelectRole(role.Id))">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <div class="admin-kpi-card__icon" style="width:36px;height:36px;border-radius:10px;background-color:@(GetRoleColor(role.Name))20;">
                            <i data-lucide="@GetRoleIcon(role.Name)" style="color:@GetRoleColor(role.Name);width:18px;height:18px;"></i>
                        </div>
                        <div style="text-align:left;">
                            <div style="font-size:14px;font-weight:600;">@role.Name</div>
                            <div style="font-size:11px;color:var(--admin-text-tertiary);">
                                @(role.UserCount ?? 0) người
                                @if (role.IsSystem) { <span>• Hệ thống</span> }
                            </div>
                        </div>
                    </div>
                    <i data-lucide="chevron-right" style="width:16px;height:16px;color:var(--admin-text-tertiary);"></i>
                </button>
            }
        </div>

        @* RIGHT: Role Details *@
        <div style="flex:1;display:flex;flex-direction:column;gap:20px;">
            @{ var selected = _roles.FirstOrDefault(r => r.Id == _selectedId); }
            @if (selected != null)
            {
                <div class="admin-panel">
                    <div class="admin-panel__header" style="display:flex;justify-content:space-between;align-items:center;">
                        <h3 class="admin-panel__title">
                            <i data-lucide="shield" style="color:var(--admin-orange-primary);"></i>
                            Chi tiết — @selected.Name
                        </h3>
                        <div style="display:flex;gap:6px;">
                            @if (!selected.IsSystem)
                            {
                                <button @onclick="@(() => ShowEditDialog(selected))" title="Sửa vai trò"
                                        style="background:none;border:1px solid var(--admin-border);cursor:pointer;padding:6px 10px;border-radius:8px;color:var(--admin-text-secondary);display:flex;align-items:center;gap:4px;font-size:12px;">
                                    <i data-lucide="pencil" style="width:13px;height:13px;"></i>
                                    Sửa
                                </button>
                                <button @onclick="@(() => DeleteRole(selected))" title="Xóa vai trò"
                                        style="background:none;border:1px solid rgba(239,68,68,0.3);cursor:pointer;padding:6px 10px;border-radius:8px;color:#EF4444;display:flex;align-items:center;gap:4px;font-size:12px;">
                                    <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
                                    Xóa
                                </button>
                            }
                            else
                            {
                                <span style="font-size:11px;padding:4px 10px;border-radius:8px;background:rgba(107,114,128,0.15);color:#6B7280;">
                                    Vai trò hệ thống
                                </span>
                            }
                        </div>
                    </div>
                    <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
                        <div style="display:flex;gap:24px;">
                            <div class="admin-store-stat" style="flex:1;">
                                <div class="admin-store-stat__value">@selected.Name</div>
                                <div class="admin-store-stat__label">Tên vai trò</div>
                            </div>
                            <div class="admin-store-stat" style="flex:1;">
                                <div class="admin-store-stat__value">@(selected.UserCount ?? 0)</div>
                                <div class="admin-store-stat__label">Số người dùng</div>
                            </div>
                            <div class="admin-store-stat" style="flex:1;">
                                <div class="admin-store-stat__value">@(selected.IsSystem ? "Có" : "Không")</div>
                                <div class="admin-store-stat__label">Vai trò hệ thống</div>
                            </div>
                            <div class="admin-store-stat" style="flex:1;">
                                <div class="admin-store-stat__value">@selected.CreatedAt.ToString("dd/MM/yy")</div>
                                <div class="admin-store-stat__label">Ngày tạo</div>
                            </div>
                        </div>

                        @if (!string.IsNullOrEmpty(selected.Description))
                        {
                            <div style="padding:12px 14px;background:var(--admin-bg-interactive);border-radius:10px;">
                                <span style="font-size:12px;font-weight:600;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">Mô tả</span>
                                <p style="font-size:14px;margin-top:4px;">@selected.Description</p>
                            </div>
                        }

                        @* EN: Permissions loaded from role_claims via API. Editable for non-system roles.
                           VI: Permissions được tải từ role_claims qua API. Có thể sửa cho non-system roles. *@
                        <div style="display:flex;justify-content:space-between;align-items:center;">
                            <div style="font-size:12px;font-weight:700;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">
                                Quyền hạn
                            </div>
                            @if (selected.IsSystem)
                            {
                                <span style="font-size:10px;color:var(--admin-text-tertiary);background:var(--admin-bg-elevated);padding:2px 8px;border-radius:4px;">Vai trò hệ thống — không thể thay đổi</span>
                            }
                        </div>
                        @foreach (var perm in _permToggles)
                        {
                            var p = perm;
                            <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--admin-bg-interactive);border-radius:10px;">
                                <div style="display:flex;flex-direction:column;">
                                    <span style="font-size:13px;font-weight:500;">@p.Label</span>
                                    <span style="font-size:11px;color:var(--admin-text-tertiary);">@p.Desc</span>
                                </div>
                                <MudSwitch T="bool" Value="p.Granted" ValueChanged="@(v => OnPermissionToggled(p.Key, v))"
                                    Color="@(p.Granted ? Color.Success : Color.Default)"
                                    Disabled="@(selected.IsSystem)" />
                            </div>
                        }
                        @if (_permsDirty && !selected.IsSystem)
                        {
                            <div style="display:flex;gap:8px;padding-top:4px;">
                                <button class="admin-btn-primary" style="font-size:12px;padding:8px 16px;" @onclick="SavePermissions" disabled="@_savingPerms">
                                    @if (_savingPerms) { <span>Đang lưu...</span> } else { <span>Lưu quyền hạn</span> }
                                </button>
                                <button style="font-size:12px;padding:8px 16px;border:1px solid var(--admin-border-subtle);border-radius:8px;background:transparent;color:var(--admin-text-tertiary);cursor:pointer;" @onclick="ResetPermissions">
                                    Hủy
                                </button>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
}

@* ═══ CREATE / EDIT DIALOG ═══ *@
@if (_showDialog)
{
    <div style="position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;display:flex;align-items:center;justify-content:center;"
         @onclick="CloseDialog">
        <div style="background:var(--admin-bg-card);border-radius:16px;padding:28px;min-width:420px;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,0.5);"
             @onclick:stopPropagation>
            <h3 style="font-size:18px;font-weight:700;margin-bottom:20px;">
                @(_isEditing ? "Sửa vai trò" : "Tạo vai trò mới")
            </h3>
            <div style="display:flex;flex-direction:column;gap:16px;">
                <div>
                    <label style="font-size:12px;font-weight:600;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">
                        Tên vai trò *
                    </label>
                    <input @bind="_dialogName" placeholder="Ví dụ: Manager"
                           style="width:100%;margin-top:6px;padding:10px 14px;border-radius:10px;border:1px solid var(--admin-border);background:var(--admin-bg-interactive);color:var(--admin-text-primary);font-size:14px;outline:none;" />
                </div>
                <div>
                    <label style="font-size:12px;font-weight:600;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">
                        Mô tả
                    </label>
                    <textarea @bind="_dialogDescription" placeholder="Mô tả quyền hạn của vai trò..." rows="3"
                              style="width:100%;margin-top:6px;padding:10px 14px;border-radius:10px;border:1px solid var(--admin-border);background:var(--admin-bg-interactive);color:var(--admin-text-primary);font-size:14px;outline:none;resize:vertical;" />
                </div>
                @if (!string.IsNullOrEmpty(_dialogError))
                {
                    <div style="padding:8px 12px;background:rgba(239,68,68,0.1);border-radius:8px;color:#EF4444;font-size:13px;">
                        @_dialogError
                    </div>
                }
                <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:8px;">
                    <button class="admin-btn-secondary" @onclick="CloseDialog" style="padding:8px 20px;">
                        Hủy
                    </button>
                    <button class="admin-btn-primary" @onclick="SaveRole" disabled="@_dialogSaving"
                            style="padding:8px 20px;">
                        @if (_dialogSaving) { <MudProgressCircular Size="Size.Small" Indeterminate="true" /> }
                        else { <span>@(_isEditing ? "Cập nhật" : "Tạo")</span> }
                    </button>
                </div>
            </div>
        </div>
    </div>
}

@code {
    private bool _loading = true;
    private Guid? _selectedId;
    private List<IamApiService.RoleDto> _roles = new();

    // EN: Permission toggle state (loaded from API, editable for non-system roles)
    // VI: Trạng thái toggle quyền hạn (tải từ API, có thể sửa cho non-system roles)
    private List<PermToggle> _permToggles = new();
    private bool _permsDirty;
    private bool _savingPerms;

    // EN: Master list of all permissions matching StaffPermissions enum
    // VI: Danh sách gốc tất cả permissions khớp StaffPermissions enum
    private static readonly List<(string Key, string Label, string Desc)> AllPermissions = new()
    {
        ("ViewSales", "Xem doanh thu", "Xem dữ liệu bán hàng và đơn hàng"),
        ("ProcessPayment", "Xử lý thanh toán", "Thu tiền và xác nhận thanh toán"),
        ("RefundOrder", "Hoàn tiền đơn hàng", "Hoàn tiền và hủy đơn hàng"),
        ("ManageInventory", "Quản lý tồn kho", "Xem và cập nhật tồn kho"),
        ("ViewReports", "Xem báo cáo", "Truy cập báo cáo và phân tích"),
        ("ManageStaff", "Quản lý nhân viên", "Thêm/sửa/xóa nhân viên"),
        ("ManageSettings", "Quản lý cài đặt", "Thay đổi cài đặt cửa hàng"),
    };

    // EN: Dialog state for create/edit
    // VI: Trạng thái dialog cho tạo/sửa
    private bool _showDialog = false;
    private bool _isEditing = false;
    private Guid? _editingRoleId;
    private string _dialogName = string.Empty;
    private string? _dialogDescription;
    private string? _dialogError;
    private bool _dialogSaving = false;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await LoadRoles();
    }

    private async Task LoadRoles()
    {
        _loading = true;
        try { _roles = await IamService.GetRolesAsync(); }
        catch { _roles = new(); }
        finally
        {
            _selectedId ??= _roles.FirstOrDefault()?.Id;
            if (_selectedId.HasValue)
            {
                var role = _roles.FirstOrDefault(r => r.Id == _selectedId);
                BuildPermToggles(role?.Permissions);
            }
            _loading = false;
        }
    }

    // ─── CREATE ───

    private void ShowCreateDialog()
    {
        _isEditing = false;
        _editingRoleId = null;
        _dialogName = string.Empty;
        _dialogDescription = null;
        _dialogError = null;
        _dialogSaving = false;
        _showDialog = true;
    }

    // ─── EDIT ───

    private void ShowEditDialog(IamApiService.RoleDto role)
    {
        _isEditing = true;
        _editingRoleId = role.Id;
        _dialogName = role.Name;
        _dialogDescription = role.Description;
        _dialogError = null;
        _dialogSaving = false;
        _showDialog = true;
    }

    // ─── SAVE (CREATE / UPDATE) ───

    private async Task SaveRole()
    {
        if (string.IsNullOrWhiteSpace(_dialogName))
        {
            _dialogError = "Tên vai trò không được để trống";
            return;
        }

        _dialogSaving = true;
        _dialogError = null;

        if (_isEditing && _editingRoleId != null)
        {
            var (success, error) = await IamService.UpdateRoleAsync(_editingRoleId.Value, _dialogName.Trim(), _dialogDescription?.Trim());
            if (success)
            {
                Snackbar.Add($"Đã cập nhật vai trò '{_dialogName}'", Severity.Success);
                CloseDialog();
                await LoadRoles();
            }
            else
            {
                _dialogError = error;
                _dialogSaving = false;
            }
        }
        else
        {
            var (success, error) = await IamService.CreateRoleAsync(_dialogName.Trim(), _dialogDescription?.Trim());
            if (success)
            {
                Snackbar.Add($"Đã tạo vai trò '{_dialogName}'", Severity.Success);
                CloseDialog();
                await LoadRoles();
                // EN: Select the new role
                // VI: Chọn role mới tạo
                _selectedId = _roles.FirstOrDefault(r => r.Name == _dialogName.Trim())?.Id ?? _selectedId;
            }
            else
            {
                _dialogError = error;
                _dialogSaving = false;
            }
        }
    }

    // ─── DELETE ───

    private async Task DeleteRole(IamApiService.RoleDto role)
    {
        var result = await DialogService.ShowMessageBox(
            "Xóa vai trò",
            $"Bạn có chắc muốn xóa vai trò '{role.Name}'? Hành động này không thể hoàn tác.",
            yesText: "Xóa", cancelText: "Hủy");

        if (result == true)
        {
            var (success, error) = await IamService.DeleteRoleAsync(role.Id);
            if (success)
            {
                Snackbar.Add($"Đã xóa vai trò '{role.Name}'", Severity.Success);
                if (_selectedId == role.Id) _selectedId = null;
                await LoadRoles();
            }
            else
            {
                Snackbar.Add(error ?? "Xóa vai trò thất bại", Severity.Error);
            }
        }
    }

    private void CloseDialog()
    {
        _showDialog = false;
        _dialogSaving = false;
    }

    private static string GetRoleColor(string name) => name.ToLower() switch
    {
        "admin" or "administrator" => "#FF5C00",
        "superadmin" => "#DC2626",
        "merchant" or "owner" => "#8B5CF6",
        "merchantadmin" => "#A855F7",
        "merchantstaff" => "#6366F1",
        "cashier" => "#3B82F6",
        "manager" => "#22C55E",
        "premiumuser" => "#F59E0B",
        "support" => "#06B6D4",
        "user" => "#6B7280",
        _ => "#6B7280"
    };

    private static string GetRoleIcon(string name) => name.ToLower() switch
    {
        "admin" or "administrator" => "crown",
        "superadmin" => "shield-alert",
        "merchant" or "owner" => "user-check",
        "merchantadmin" => "user-cog",
        "merchantstaff" => "user",
        "cashier" => "calculator",
        "manager" => "briefcase",
        "premiumuser" => "star",
        "support" => "headphones",
        "user" => "user",
        _ => "shield"
    };

    // EN: Permission toggle record for UI state
    // VI: Record toggle quyền hạn cho trạng thái UI
    private class PermToggle
    {
        public string Key { get; set; } = "";
        public string Label { get; set; } = "";
        public string Desc { get; set; } = "";
        public bool Granted { get; set; }
    }

    /// <summary>
    /// EN: Select a role and load its permissions from API (role_claims).
    /// VI: Chọn role và tải permissions từ API (role_claims).
    /// </summary>
    private void SelectRole(Guid roleId)
    {
        _selectedId = roleId;
        _permsDirty = false;
        var role = _roles.FirstOrDefault(r => r.Id == roleId);
        BuildPermToggles(role?.Permissions);
    }

    /// <summary>
    /// EN: Build permission toggles from API data (role.Permissions list).
    /// VI: Tạo permission toggles từ dữ liệu API (role.Permissions list).
    /// </summary>
    private void BuildPermToggles(List<string>? granted)
    {
        var grantedSet = new HashSet<string>(granted ?? new(), StringComparer.OrdinalIgnoreCase);
        var hasAll = grantedSet.Contains("All");
        _permToggles = AllPermissions.Select(p => new PermToggle
        {
            Key = p.Key,
            Label = p.Label,
            Desc = p.Desc,
            Granted = hasAll || grantedSet.Contains(p.Key)
        }).ToList();
    }

    private void OnPermissionToggled(string key, bool value)
    {
        var toggle = _permToggles.FirstOrDefault(t => t.Key == key);
        if (toggle != null) { toggle.Granted = value; _permsDirty = true; }
    }

    private void ResetPermissions()
    {
        var role = _roles.FirstOrDefault(r => r.Id == _selectedId);
        BuildPermToggles(role?.Permissions);
        _permsDirty = false;
    }

    private async Task SavePermissions()
    {
        if (_selectedId == null) return;
        _savingPerms = true;
        StateHasChanged();
        try
        {
            var granted = _permToggles.Where(t => t.Granted).Select(t => t.Key).ToList();
            var (ok, err) = await IamService.UpdateRolePermissionsAsync(_selectedId.Value, granted);
            if (ok)
            {
                Snackbar.Add("Đã lưu quyền hạn thành công!", Severity.Success);
                _permsDirty = false;
                // EN: Reload roles to sync permissions in role list
                // VI: Tải lại roles để đồng bộ permissions trong danh sách
                await LoadRoles();
                SelectRole(_selectedId.Value);
            }
            else
            {
                Snackbar.Add(err ?? "Lỗi khi lưu quyền hạn", Severity.Error);
            }
        }
        catch (Exception ex) { Snackbar.Add($"Lỗi: {ex.Message}", Severity.Error); }
        finally { _savingPerms = false; StateHasChanged(); }
    }
}
