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

@*
    EN: Manager overview — reports and team summary.
    VI: Tổng quan quản lý — báo cáo và tổng hợp nhân viên.
*@

<PageTitle>Báo cáo - Manager</PageTitle>

<div class="staff-page">
    <div class="staff-page-header">
        <h1 class="staff-page-title">Tổng quan</h1>
        <p class="staff-page-subtitle">Báo cáo hoạt động cửa hàng hôm nay</p>
    </div>

    @* ═══ TODAY'S STATS ═══ *@
    <div class="staff-stats-grid" style="margin-bottom:24px;">
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(255,92,0,0.12);">
                <i data-lucide="shopping-bag" style="color:#FF5C00;"></i>
            </div>
            <span class="staff-stat-card__value">--</span>
            <span class="staff-stat-card__label">Đơn hàng hôm nay</span>
        </div>
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(34,197,94,0.12);">
                <i data-lucide="banknote" style="color:#22C55E;"></i>
            </div>
            <span class="staff-stat-card__value">--</span>
            <span class="staff-stat-card__label">Doanh thu</span>
        </div>
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(59,130,246,0.12);">
                <i data-lucide="users" style="color:#3B82F6;"></i>
            </div>
            <span class="staff-stat-card__value">@_staffOnline</span>
            <span class="staff-stat-card__label">Nhân viên online</span>
        </div>
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(245,158,11,0.12);">
                <i data-lucide="calendar-off" style="color:#F59E0B;"></i>
            </div>
            <span class="staff-stat-card__value">@_pendingLeave</span>
            <span class="staff-stat-card__label">Nghỉ phép chờ duyệt</span>
        </div>
    </div>

    @* ═══ TEAM STATUS ═══ *@
    <div class="staff-table-card" style="margin-bottom:20px;">
        <div class="staff-table-card__header">
            <span class="staff-table-card__title">Nhân viên hôm nay</span>
        </div>
        <MudSimpleTable Dense="true" Hover="true" Style="background:transparent;">
            <thead>
                <tr>
                    <th>Tên</th>
                    <th>Vai trò</th>
                    <th>Check-in</th>
                    <th>Trạng thái</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var s in _teamStatus)
                {
                    <tr>
                        <td style="font-weight:600;">@s.Name</td>
                        <td>@s.Role</td>
                        <td>@s.CheckIn</td>
                        <td><span class="staff-status @(s.IsOnline ? "staff-status--success" : "staff-status--neutral")">@(s.IsOnline ? "Online" : "Offline")</span></td>
                    </tr>
                }
                @if (_teamStatus.Count == 0)
                {
                    <tr><td colspan="4" style="text-align:center;color:var(--admin-text-tertiary);padding:24px;">Chưa có dữ liệu</td></tr>
                }
            </tbody>
        </MudSimpleTable>
    </div>

    @* ═══ PENDING LEAVE REQUESTS ═══ *@
    <div class="staff-table-card">
        <div class="staff-table-card__header">
            <span class="staff-table-card__title">Nghỉ phép chờ duyệt</span>
        </div>
        <div style="padding:20px;text-align:center;color:var(--admin-text-tertiary);">
            Chưa có yêu cầu nghỉ phép nào cần duyệt
        </div>
    </div>
</div>

@code {
    private int _staffOnline = 0;
    private int _pendingLeave = 0;
    private List<TeamMember> _teamStatus = new();

    protected override void OnInitialized()
    {
        // EN: Mock team data — will be connected to real staff/attendance API
        // VI: Mock dữ liệu team — sẽ kết nối với API nhân viên/chấm công thực
        _teamStatus = new()
        {
            new("Trần Văn B", "Thu ngân", "08:05", true),
            new("Trần Văn C", "Phục vụ", "08:12", true),
            new("Trần Văn D", "Bếp", "07:55", true),
        };
        _staffOnline = _teamStatus.Count(t => t.IsOnline);
    }

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

    private record TeamMember(string Name, string Role, string CheckIn, bool IsOnline);
}
