@page "/staff/team"
@layout StaffLayout
@using WebClientTpos.Client.Services
@inject PosDataService DataService
@inject IJSRuntime JS

@*
    EN: Manager team management — view staff list, attendance, leave.
    VI: Quản lý đội ngũ — xem danh sách nhân viên, chấm công, nghỉ phép.
*@

<PageTitle>Quản lý nhân viên</PageTitle>

<div class="staff-page">
    <div class="staff-page-header">
        <h1 class="staff-page-title">Đội ngũ</h1>
        <p class="staff-page-subtitle">Quản lý nhân viên cửa hàng</p>
    </div>

    @if (_loading)
    {
        <div style="text-align:center;padding:48px;">
            <MudProgressCircular Indeterminate="true" Size="Size.Medium" Color="Color.Success" />
        </div>
    }
    else
    {
        <div class="staff-table-card">
            <div class="staff-table-card__header">
                <span class="staff-table-card__title">Danh sách nhân viên (@_staff.Count)</span>
            </div>
            <MudSimpleTable Dense="true" Hover="true" Style="background:transparent;">
                <thead>
                    <tr>
                        <th>Tên</th>
                        <th>Mã NV</th>
                        <th>Vai trò</th>
                        <th>Email</th>
                        <th>SĐT</th>
                        <th>Trạng thái</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var s in _staff)
                    {
                        <tr>
                            <td style="font-weight:600;">@(s.FirstName ?? "") @(s.LastName ?? "")</td>
                            <td>@(s.EmployeeCode ?? "--")</td>
                            <td>@(s.Role ?? "--")</td>
                            <td style="font-size:13px;color:var(--admin-text-secondary);">@(s.Email ?? "--")</td>
                            <td>@(s.Phone ?? "--")</td>
                            <td>
                                <span class="staff-status @(s.Status == "Active" ? "staff-status--success" : "staff-status--neutral")">
                                    @(s.Status == "Active" ? "Hoạt động" : s.Status ?? "--")
                                </span>
                            </td>
                        </tr>
                    }
                    @if (_staff.Count == 0)
                    {
                        <tr><td colspan="6" style="text-align:center;color:var(--admin-text-tertiary);padding:24px;">Không có nhân viên</td></tr>
                    }
                </tbody>
            </MudSimpleTable>
        </div>
    }
</div>

@code {
    private List<PosDataService.StaffInfo> _staff = new();
    private bool _loading = true;

    [CascadingParameter] private StaffLayout? Layout { get; set; }

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var shopId = Layout?.ShopId;
            if (shopId.HasValue)
                _staff = await DataService.GetStaffForShopAsync(shopId.Value);
            else
                _staff = await DataService.GetStaffAsync();
        }
        catch { }
        finally { _loading = false; }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
    }
}
