@*
    EN: Shift Management — Current shift info, opening cash, quick actions, shift summary.
    VI: Quản lý ca — Thông tin ca hiện tại, tiền mở ca, thao tác nhanh, tổng kết ca.
*@
@page "/pos/{ShopId:guid}/operations/shift"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<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;">Quản lý ca</span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;padding:4px 12px;border-radius:6px;font-weight:600;background:rgba(34,197,94,.15);color:var(--pos-success);">
            Đang hoạt động
        </span>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;">
        @* ═══ CURRENT SHIFT INFO / THÔNG TIN CA HIỆN TẠI ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                <div style="width:44px;height:44px;border-radius:12px;background:rgba(255,92,0,.12);display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="clock" style="width:22px;height:22px;color:var(--pos-orange-primary);"></i>
                </div>
                <div>
                    <div style="font-size:16px;font-weight:700;">Ca sáng</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Bắt đầu: 08:00 — Hôm nay</div>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:12px;text-align:center;">
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Nhân viên</div>
                    <div style="font-size:14px;font-weight:600;margin-top:4px;">Nguyễn Văn A</div>
                </div>
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:12px;text-align:center;">
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Máy thu ngân</div>
                    <div style="font-size:14px;font-weight:600;margin-top:4px;">POS-01</div>
                </div>
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:12px;text-align:center;">
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Tiền mở ca</div>
                    <div style="font-size:14px;font-weight:600;margin-top:4px;color:var(--pos-orange-primary);">@FormatPrice(_openingCash)</div>
                </div>
            </div>
        </div>

        @* ═══ QUICK ACTIONS / THAO TÁC NHANH ═══ *@
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
            <button style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:var(--pos-radius);
                           padding:20px;text-align:center;cursor:pointer;color:var(--pos-danger);" @onclick="EndShift">
                <i data-lucide="power" style="width:24px;height:24px;display:block;margin:0 auto 8px;"></i>
                <div style="font-size:14px;font-weight:600;">Kết ca</div>
                <div style="font-size:11px;opacity:.7;margin-top:2px;">End Shift</div>
            </button>
            <button style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:var(--pos-radius);
                           padding:20px;text-align:center;cursor:pointer;color:var(--pos-warning);" @onclick="CashDrop">
                <i data-lucide="banknote" style="width:24px;height:24px;display:block;margin:0 auto 8px;"></i>
                <div style="font-size:14px;font-weight:600;">Rút tiền</div>
                <div style="font-size:11px;opacity:.7;margin-top:2px;">Cash Drop</div>
            </button>
            <button style="background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);border-radius:var(--pos-radius);
                           padding:20px;text-align:center;cursor:pointer;color:#3B82F6;" @onclick="@(() => NavigateTo("operations/cash-drawer"))">
                <i data-lucide="calculator" style="width:24px;height:24px;display:block;margin:0 auto 8px;"></i>
                <div style="font-size:14px;font-weight:600;">Kiểm tiền</div>
                <div style="font-size:11px;opacity:.7;margin-top:2px;">Cash Count</div>
            </button>
        </div>

        @* ═══ SHIFT SUMMARY / TỔNG KẾT CA ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <div style="font-size:15px;font-weight:700;margin-bottom:16px;">Tổng kết ca</div>

            <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;">
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:16px;">
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                        <i data-lucide="receipt" style="width:16px;height:16px;color:var(--pos-text-tertiary);"></i>
                        <span style="font-size:12px;color:var(--pos-text-tertiary);">Tổng đơn hàng</span>
                    </div>
                    <div style="font-size:24px;font-weight:800;color:var(--pos-text-primary);">@_totalOrders</div>
                </div>
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:16px;">
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                        <i data-lucide="trending-up" style="width:16px;height:16px;color:var(--pos-text-tertiary);"></i>
                        <span style="font-size:12px;color:var(--pos-text-tertiary);">Tổng doanh thu</span>
                    </div>
                    <div style="font-size:24px;font-weight:800;color:var(--pos-orange-primary);">@FormatPrice(_totalRevenue)</div>
                </div>
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:16px;">
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                        <i data-lucide="banknote" style="width:16px;height:16px;color:var(--pos-text-tertiary);"></i>
                        <span style="font-size:12px;color:var(--pos-text-tertiary);">Tiền mặt</span>
                    </div>
                    <div style="font-size:20px;font-weight:700;color:var(--pos-success);">@FormatPrice(_cashTotal)</div>
                </div>
                <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:16px;">
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                        <i data-lucide="credit-card" style="width:16px;height:16px;color:var(--pos-text-tertiary);"></i>
                        <span style="font-size:12px;color:var(--pos-text-tertiary);">Thẻ</span>
                    </div>
                    <div style="font-size:20px;font-weight:700;color:#3B82F6;">@FormatPrice(_cardTotal)</div>
                </div>
            </div>
        </div>

        @* ═══ RECENT ACTIVITY / HOẠT ĐỘNG GẦN ĐÂY ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <div style="font-size:15px;font-weight:700;margin-bottom:12px;">Hoạt động gần đây</div>
            @foreach (var activity in _activities)
            {
                <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                    <div style="width:32px;height:32px;border-radius:8px;background:var(--pos-bg-interactive);display:flex;align-items:center;justify-content:center;">
                        <i data-lucide="@activity.Icon" style="width:14px;height:14px;color:var(--pos-text-tertiary);"></i>
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:13px;font-weight:600;">@activity.Description</div>
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">@activity.Time</div>
                    </div>
                    @if (activity.Amount > 0)
                    {
                        <span style="font-size:13px;font-weight:600;color:var(--pos-orange-primary);">@FormatPrice(activity.Amount)</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: Shift data / VI: Dữ liệu ca
    private readonly decimal _openingCash = 2_000_000;
    private readonly int _totalOrders = 15;
    private readonly decimal _totalRevenue = 4_500_000;
    private readonly decimal _cashTotal = 2_800_000;
    private readonly decimal _cardTotal = 1_700_000;

    // EN: Recent activity log / VI: Nhật ký hoạt động gần đây
    private readonly List<ActivityEntry> _activities = new()
    {
        new("Đơn hàng #DH015 hoàn thành", "14:32", "receipt", 350_000),
        new("Rút tiền mặt", "13:00", "banknote", 1_000_000),
        new("Đơn hàng #DH014 hoàn thành", "12:45", "receipt", 285_000),
        new("Đơn hàng #DH013 hoàn thành", "12:15", "receipt", 520_000),
        new("Mở ca", "08:00", "play", 0),
    };

    private void EndShift() { }
    private void CashDrop() { }

    private record ActivityEntry(string Description, string Time, string Icon, decimal Amount);
}
