@*
    EN: Staff Clock In/Out — Real-time clock, staff info, toggle clock button, today's log.
    VI: Chấm công nhân viên — Đồng hồ thời gian thực, thông tin NV, nút chấm công, nhật ký hôm nay.
*@
@page "/pos/{ShopId:guid}/operations/clock-in-out"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS
@implements IDisposable

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER ═══ *@
    <div style="padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
        <button class="pos-category-tab" @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">Chấm công</span>
    </div>

    <div style="flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;align-items:center;gap:24px;">
        @* ═══ CURRENT TIME DISPLAY / ĐỒNG HỒ HIỆN TẠI ═══ *@
        <div style="text-align:center;padding:32px 0;">
            <div style="font-size:64px;font-weight:800;color:var(--pos-text-primary);letter-spacing:2px;">
                @_currentTime.ToString("HH:mm:ss")
            </div>
            <div style="font-size:14px;color:var(--pos-text-tertiary);margin-top:8px;">
                @_currentTime.ToString("dddd, dd/MM/yyyy")
            </div>
        </div>

        @* ═══ STAFF INFO / THÔNG TIN NHÂN VIÊN ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px 32px;text-align:center;width:100%;max-width:400px;">
            <div style="width:64px;height:64px;border-radius:50%;background:var(--pos-bg-interactive);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                <i data-lucide="user" style="width:28px;height:28px;color:var(--pos-orange-primary);"></i>
            </div>
            <div style="font-size:18px;font-weight:700;color:var(--pos-text-primary);">@StaffName</div>
            <div style="font-size:13px;color:var(--pos-text-tertiary);margin-top:4px;">@_staffRole</div>
            <div style="margin-top:12px;padding:6px 16px;border-radius:20px;display:inline-block;font-size:12px;font-weight:600;
                        background:@(_isClockedIn ? "rgba(34,197,94,.15)" : "rgba(239,68,68,.15)");
                        color:@(_isClockedIn ? "var(--pos-success)" : "var(--pos-danger)");">
                @(_isClockedIn ? "Đang làm việc" : "Chưa chấm công")
            </div>
        </div>

        @* ═══ CLOCK IN/OUT BUTTON / NÚT CHẤM CÔNG ═══ *@
        <button style="width:180px;height:180px;border-radius:50%;border:4px solid @(_isClockedIn ? "var(--pos-danger)" : "var(--pos-success)");
                       background:@(_isClockedIn ? "rgba(239,68,68,.1)" : "rgba(34,197,94,.1)");
                       color:@(_isClockedIn ? "var(--pos-danger)" : "var(--pos-success)");
                       font-size:18px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
                       transition:all .2s ease;"
                @onclick="ToggleClock">
            <i data-lucide="@(_isClockedIn ? "log-out" : "log-in")" style="width:32px;height:32px;"></i>
            @(_isClockedIn ? "Clock Out" : "Clock In")
        </button>

        @* ═══ TODAY'S LOG / NHẬT KÝ HÔM NAY ═══ *@
        <div style="width:100%;max-width:500px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                <span style="font-size:15px;font-weight:600;">Nhật ký hôm nay</span>
                <span style="font-size:13px;color:var(--pos-orange-primary);font-weight:600;">
                    Tổng: @_totalHours.ToString("F1") giờ
                </span>
            </div>

            @foreach (var entry in _clockEntries)
            {
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:14px 16px;margin-bottom:8px;
                            display:flex;align-items:center;gap:12px;">
                    <div style="width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
                                background:@(entry.Type == "in" ? "rgba(34,197,94,.15)" : "rgba(239,68,68,.15)");">
                        <i data-lucide="@(entry.Type == "in" ? "log-in" : "log-out")"
                           style="width:16px;height:16px;color:@(entry.Type == "in" ? "var(--pos-success)" : "var(--pos-danger)");"></i>
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:14px;font-weight:600;">@(entry.Type == "in" ? "Vào ca" : "Ra ca")</div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);">@entry.Time</div>
                    </div>
                    <span style="font-size:11px;padding:3px 10px;border-radius:6px;font-weight:600;
                                 background:@(entry.Type == "in" ? "rgba(34,197,94,.12)" : "rgba(239,68,68,.12)");
                                 color:@(entry.Type == "in" ? "var(--pos-success)" : "var(--pos-danger)");">
                        @(entry.Type == "in" ? "IN" : "OUT")
                    </span>
                </div>
            }
        </div>
    </div>
</div>

@code {
    // EN: Operational data — requires dedicated shift/cash management API.
    // VI: Dữ liệu vận hành — cần API quản lý ca/tiền mặt riêng.
    // TODO: Integrate with Merchant Service staff/shift endpoints when available.

    // EN: Staff info / VI: Thông tin nhân viên
    private readonly string _staffRole = "Thu ngân — Cashier";
    private bool _isClockedIn = true;
    private DateTime _currentTime = DateTime.Now;
    private double _totalHours = 5.5;
    private Timer? _clockTimer;

    // EN: Today's clock entries / VI: Bản ghi chấm công hôm nay
    private readonly List<ClockEntry> _clockEntries = new()
    {
        new("08:00", "in"),
        new("12:00", "out"),
        new("13:30", "in"),
    };

    protected override void OnInitialized()
    {
        _clockTimer = new Timer(_ =>
        {
            _currentTime = DateTime.Now;
            InvokeAsync(StateHasChanged);
        }, null, TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1));
    }

    private void ToggleClock()
    {
        _isClockedIn = !_isClockedIn;
        _clockEntries.Add(new(DateTime.Now.ToString("HH:mm"), _isClockedIn ? "in" : "out"));
    }

    public void Dispose() => _clockTimer?.Dispose();

    private record ClockEntry(string Time, string Type);
}
