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

@*
    EN: Staff directory — grid of staff cards with search, filter by store/role.
    VI: Danh bạ nhân sự — grid thẻ nhân viên, tìm kiếm, lọc theo cửa hàng/vai trò.
    Design: pencil-design/src/pages/tPOS/admin/staff-directory.pen
*@

<PageTitle>Quản lý nhân sự — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Quản lý nhân sự</h1>
        <p class="admin-topbar__subtitle">Tất cả cửa hàng • @_staffList.Count nhân viên</p>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-search" style="width:220px;">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm nhân viên..." @bind="SearchQuery" />
        </div>
        <button class="admin-btn-secondary">
            <i data-lucide="filter"></i>
            <span>Bộ lọc</span>
        </button>
        <button class="admin-btn-primary" @onclick="@(() => NavigateTo("staff/create"))">
            <i data-lucide="user-plus"></i>
            <span>Thêm nhân viên</span>
        </button>
    </div>
</div>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_activeTab == "all" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "all")">
        Tất cả <span class="admin-tab__badge admin-tab__badge--active">@_staffList.Count</span>
    </button>
    <button class="admin-tab @(_activeTab == "active" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "active")">
        Đang làm việc <span class="admin-tab__badge">@_staffList.Count(s => s.Status == "active")</span>
    </button>
    <button class="admin-tab @(_activeTab == "off" ? "admin-tab--active" : "")" @onclick="@(() => _activeTab = "off")">
        Nghỉ phép <span class="admin-tab__badge">@_staffList.Count(s => s.Status == "off")</span>
    </button>
</div>

@* ═══ STAFF GRID ═══ *@
<div class="admin-content" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
    @foreach (var staff in _staffList)
    {
        <div class="admin-staff-card" @onclick="@(() => NavigateTo($"staff/{staff.Id}"))">
            <div class="admin-staff-card__header">
                <div class="admin-user-avatar" style="width:48px;height:48px;font-size:16px;background-color:@staff.AvatarColor;">
                    @staff.Initials
                </div>
                <div class="admin-status-badge @(staff.Status == "active" ? "admin-status-badge--online" : "admin-status-badge--setup")">
                    <span class="admin-status-badge__dot"></span>
                    @(staff.Status == "active" ? "Đang ca" : "Nghỉ")
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:2px;">
                <span style="font-size:16px;font-weight:600;">@staff.Name</span>
                <span style="font-size:12px;color:var(--admin-text-tertiary);">@staff.Role • @staff.Store</span>
            </div>
            <div style="display:flex;gap:8px;">
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@staff.Hours</div>
                    <div class="admin-store-stat__label">Giờ/tuần</div>
                </div>
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@staff.Orders</div>
                    <div class="admin-store-stat__label">Đơn hôm nay</div>
                </div>
                <div class="admin-store-stat" style="flex:1;">
                    <div class="admin-store-stat__value">@staff.Rating</div>
                    <div class="admin-store-stat__label">Đánh giá</div>
                </div>
            </div>
        </div>
    }
</div>

@code {
    private string _activeTab = "all";

    private record StaffMember(string Id, string Name, string Initials, string Role, string Store, string Status, string AvatarColor, string Hours, string Orders, string Rating);
    private readonly List<StaffMember> _staffList = new()
    {
        new("1", "Trần Minh Đức", "TM", "Barista", "Coffee House Q1", "active", "#FF5C00", "42", "28", "4.8"),
        new("2", "Lê Thị Thảo", "LT", "Thu ngân", "Coffee House Q1", "active", "#3B82F6", "38", "45", "4.9"),
        new("3", "Nguyễn Hà My", "NH", "Phục vụ", "Nhà hàng Q3", "active", "#22C55E", "40", "32", "4.7"),
        new("4", "Phạm Văn An", "PA", "Quản lý", "Nhà hàng Q3", "active", "#8B5CF6", "45", "0", "4.6"),
        new("5", "Hoàng Thị Lan", "HL", "Barista", "Coffee House Q1", "off", "#EC4899", "0", "0", "4.5"),
        new("6", "Võ Đình Khoa", "VK", "Bếp trưởng", "Nhà hàng Q3", "active", "#F59E0B", "44", "18", "4.9"),
        new("7", "Đặng Phương Linh", "ĐL", "Phục vụ", "Nhà hàng Q3", "active", "#06B6D4", "36", "22", "4.4"),
        new("8", "Bùi Thanh Tùng", "BT", "Thu ngân", "Café Thủ Đức", "active", "#3B82F6", "38", "30", "4.7"),
    };
}
