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

@*
    EN: Staff schedule — weekly grid view with shifts, drag-drop.
    VI: Lịch làm việc — hiển thị tuần dạng grid, ca làm, kéo thả.
    Design: pencil-design/src/pages/tPOS/admin/staff-schedule.pen
*@

<PageTitle>Lịch làm việc — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Lịch làm việc</h1>
        <p class="admin-topbar__subtitle">Tuần 10/02 – 16/02/2025 • Coffee House Q1</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="chevron-left"></i>
        </button>
        <span style="font-size:14px;font-weight:600;min-width:120px;text-align:center;">Tuần này</span>
        <button class="admin-btn-secondary">
            <i data-lucide="chevron-right"></i>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="plus"></i>
            <span>Thêm ca</span>
        </button>
    </div>
</div>

@* ═══ SCHEDULE GRID ═══ *@
<div class="admin-content" style="overflow-x:auto;">
    <div class="admin-schedule-grid">
        @* Header row *@
        <div class="admin-schedule-header">
            <div class="admin-schedule-header__cell" style="width:160px;">Nhân viên</div>
            @foreach (var day in _days)
            {
                <div class="admin-schedule-header__cell">
                    <span style="font-size:11px;color:var(--admin-text-tertiary);">@day.DayName</span>
                    <span style="font-size:14px;font-weight:600;">@day.Date</span>
                </div>
            }
        </div>

        @* Staff rows *@
        @foreach (var staff in _scheduleStaff)
        {
            <div class="admin-schedule-row">
                <div class="admin-schedule-row__name">
                    <div class="admin-user-avatar" style="width:32px;height:32px;font-size:11px;background-color:@staff.Color;">
                        @staff.Initials
                    </div>
                    <div>
                        <div style="font-size:13px;font-weight:600;">@staff.Name</div>
                        <div style="font-size:11px;color:var(--admin-text-tertiary);">@staff.Role</div>
                    </div>
                </div>
                @foreach (var shift in staff.Shifts)
                {
                    <div class="admin-schedule-cell">
                        @if (!string.IsNullOrEmpty(shift))
                        {
                            <div class="admin-shift-chip" style="background-color:@(staff.Color)20;color:@(staff.Color);border:1px solid @(staff.Color)40;">
                                @shift
                            </div>
                        }
                    </div>
                }
            </div>
        }
    </div>
</div>

@code {
    private record DayInfo(string DayName, string Date);
    private readonly DayInfo[] _days = new[]
    {
        new DayInfo("T2", "10"), new DayInfo("T3", "11"), new DayInfo("T4", "12"),
        new DayInfo("T5", "13"), new DayInfo("T6", "14"), new DayInfo("T7", "15"), new DayInfo("CN", "16")
    };

    private record ScheduleStaff(string Name, string Initials, string Role, string Color, string[] Shifts);
    private readonly ScheduleStaff[] _scheduleStaff = new[]
    {
        new ScheduleStaff("Trần Minh", "TM", "Barista", "#FF5C00", new[] {"07:00-15:00", "07:00-15:00", "", "07:00-15:00", "07:00-15:00", "07:00-15:00", ""}),
        new ScheduleStaff("Lê Thảo", "LT", "Thu ngân", "#3B82F6", new[] {"15:00-22:00", "15:00-22:00", "15:00-22:00", "15:00-22:00", "", "15:00-22:00", "15:00-22:00"}),
        new ScheduleStaff("Nguyễn Hà", "NH", "Phục vụ", "#22C55E", new[] {"07:00-15:00", "", "07:00-15:00", "07:00-15:00", "07:00-15:00", "", "07:00-15:00"}),
        new ScheduleStaff("Phạm An", "PA", "Quản lý", "#8B5CF6", new[] {"08:00-17:00", "08:00-17:00", "08:00-17:00", "08:00-17:00", "08:00-17:00", "", ""}),
        new ScheduleStaff("Hoàng Lan", "HL", "Barista", "#EC4899", new[] {"", "", "15:00-22:00", "", "15:00-22:00", "07:00-15:00", "07:00-15:00"}),
    };
}
