@page "/admin/roles"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Role permissions — manage roles and their POS/admin permissions.
    VI: Phân quyền — quản lý vai trò và quyền hạn POS/admin.
    Design: pencil-design/src/pages/tPOS/admin/role-permissions.pen
*@

<PageTitle>Phân quyền — GoodGo 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">
            <i data-lucide="plus"></i>
            <span>Tạo vai trò</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<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)
        {
            var r = role;
            <button class="admin-role-card @(_selectedRole == r.Key ? "admin-role-card--active" : "")" @onclick="@(() => _selectedRole = r.Key)">
                <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:@(r.Color)20;">
                        <i data-lucide="@r.Icon" style="color:@r.Color;width:18px;height:18px;"></i>
                    </div>
                    <div style="text-align:left;">
                        <div style="font-size:14px;font-weight:600;">@r.Name</div>
                        <div style="font-size:11px;color:var(--admin-text-tertiary);">@r.Count người</div>
                    </div>
                </div>
                <i data-lucide="chevron-right" style="width:16px;height:16px;color:var(--admin-text-tertiary);"></i>
            </button>
        }
    </div>

    @* RIGHT: Permissions grid *@
    <div style="flex:1;display:flex;flex-direction:column;gap:20px;">
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="shield" style="color:var(--admin-orange-primary);"></i>
                    Quyền hạn — @(_roles.FirstOrDefault(r => r.Key == _selectedRole)?.Name ?? "")
                </h3>
                <button class="admin-btn-secondary" style="font-size:12px;padding:6px 12px;">
                    <i data-lucide="edit-2" style="width:14px;height:14px;"></i>
                    Chỉnh sửa
                </button>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
                @foreach (var group in _permissionGroups)
                {
                    <div style="display:flex;flex-direction:column;gap:8px;">
                        <div style="font-size:12px;font-weight:700;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">
                            @group.GroupName
                        </div>
                        @foreach (var perm in group.Permissions)
                        {
                            <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;">@perm.Label</span>
                                    <span style="font-size:11px;color:var(--admin-text-tertiary);">@perm.Desc</span>
                                </div>
                                <MudSwitch T="bool" Value="perm.Allowed" Color="Color.Primary" />
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@code {
    private string _selectedRole = "manager";

    private record RoleDef(string Key, string Name, string Icon, string Color, string Count);
    private readonly RoleDef[] _roles = new[]
    {
        new RoleDef("owner", "Chủ sở hữu", "crown", "#FF5C00", "1"),
        new RoleDef("manager", "Quản lý", "user-check", "#8B5CF6", "2"),
        new RoleDef("cashier", "Thu ngân", "calculator", "#3B82F6", "3"),
        new RoleDef("barista", "Barista", "coffee", "#22C55E", "2"),
        new RoleDef("server", "Phục vụ", "hand", "#EC4899", "2"),
    };

    private record Permission(string Label, string Desc, bool Allowed);
    private record PermissionGroup(string GroupName, Permission[] Permissions);
    private readonly PermissionGroup[] _permissionGroups = new[]
    {
        new PermissionGroup("POS", new[]
        {
            new Permission("Tạo đơn hàng", "Tạo và xử lý đơn hàng", true),
            new Permission("Áp dụng giảm giá", "Giảm giá cho đơn hàng", true),
            new Permission("Hủy đơn hàng", "Hủy đơn đã tạo", true),
            new Permission("Hoàn tiền", "Hoàn tiền cho khách", false),
            new Permission("Đóng ca", "Kết thúc ca bán hàng", true),
        }),
        new PermissionGroup("QUẢN LÝ", new[]
        {
            new Permission("Xem báo cáo", "Truy cập báo cáo doanh thu", true),
            new Permission("Quản lý nhân sự", "Thêm/sửa/xóa nhân viên", false),
            new Permission("Quản lý sản phẩm", "Thêm/sửa/xóa sản phẩm", true),
            new Permission("Quản lý kho", "Nhập/xuất kho hàng", true),
        }),
        new PermissionGroup("HỆ THỐNG", new[]
        {
            new Permission("Cài đặt cửa hàng", "Thay đổi thông tin cửa hàng", false),
            new Permission("Quản lý thiết bị", "Thêm/xóa thiết bị POS", false),
            new Permission("Xem audit log", "Xem lịch sử thao tác", true),
        }),
    };
}
