@*
    EN: Cash Drawer — Denomination breakdown, quick count with +/- buttons, expected vs actual totals, variance.
    VI: Quản lý ngăn kéo tiền — Bảng mệnh giá, đếm nhanh +/-, so sánh dự kiến/thực tế, chênh lệch.
*@
@page "/pos/{ShopId:guid}/operations/cash-drawer"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services

<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="@(() => NavigateTo("operations/shift"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">Kiểm tiền ngăn kéo</span>
        <span style="flex:1;"></span>
        <span style="font-size:12px;padding:4px 12px;border-radius:6px;font-weight:600;
                     background:@(_drawerOpen ? "rgba(34,197,94,.15)" : "rgba(239,68,68,.15)");
                     color:@(_drawerOpen ? "var(--pos-success)" : "var(--pos-danger)");">
            @(_drawerOpen ? "Đang mở" : "Đã đóng")
        </span>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;display:flex;gap:16px;">
        @* ═══ DENOMINATION BREAKDOWN (LEFT) / BẢNG MỆNH GIÁ (TRÁI) ═══ *@
        <div style="flex:1;display:flex;flex-direction:column;gap:12px;">
            <div style="font-size:15px;font-weight:700;margin-bottom:4px;">Bảng mệnh giá</div>

            @foreach (var denom in _denominations)
            {
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:12px 16px;
                            display:flex;align-items:center;gap:12px;">
                    @* EN: Denomination label / VI: Nhãn mệnh giá *@
                    <div style="min-width:100px;">
                        <div style="font-size:14px;font-weight:600;">@FormatPrice(denom.Value)</div>
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">@denom.Label</div>
                    </div>

                    @* EN: Quick count controls / VI: Điều khiển đếm nhanh *@
                    <div style="flex:1;display:flex;align-items:center;justify-content:center;gap:10px;">
                        <button style="width:36px;height:36px;border-radius:8px;border:1px solid var(--pos-border-default);
                                       background:transparent;color:var(--pos-text-primary);font-size:18px;cursor:pointer;"
                                @onclick="() => ChangeDenomCount(denom, -1)">−</button>
                        <span style="font-size:16px;font-weight:700;min-width:40px;text-align:center;">@denom.Count</span>
                        <button style="width:36px;height:36px;border-radius:8px;border:1px solid var(--pos-border-default);
                                       background:transparent;color:var(--pos-text-primary);font-size:18px;cursor:pointer;"
                                @onclick="() => ChangeDenomCount(denom, 1)">+</button>
                    </div>

                    @* EN: Subtotal / VI: Thành tiền *@
                    <div style="min-width:120px;text-align:right;font-size:14px;font-weight:600;color:var(--pos-orange-primary);">
                        @FormatPrice(denom.Value * denom.Count)
                    </div>
                </div>
            }
        </div>

        @* ═══ SUMMARY PANEL (RIGHT) / PANEL TỔNG KẾT (PHẢI) ═══ *@
        <div style="width:320px;min-width:320px;display:flex;flex-direction:column;gap:16px;">
            @* EN: Expected vs actual / VI: Dự kiến so với thực tế *@
            <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</div>

                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                    <span style="font-size:13px;color:var(--pos-text-secondary);">Dự kiến</span>
                    <span style="font-size:14px;font-weight:600;">@FormatPrice(_expectedCash)</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                    <span style="font-size:13px;color:var(--pos-text-secondary);">Thực đếm</span>
                    <span style="font-size:14px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(ActualTotal)</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;">
                    <span style="font-size:13px;font-weight:600;">Chênh lệch</span>
                    <span style="font-size:14px;font-weight:700;color:@(Variance >= 0 ? "var(--pos-success)" : "var(--pos-danger)");">
                        @(Variance >= 0 ? "+" : "")@FormatPrice(Variance)
                    </span>
                </div>
            </div>

            @* EN: Variance status / VI: Trạng thái chênh lệch *@
            <div style="background:@(Math.Abs(Variance) < 1000 ? "rgba(34,197,94,.1)" : "rgba(239,68,68,.1)");
                        border-radius:var(--pos-radius);padding:16px;text-align:center;">
                <i data-lucide="@(Math.Abs(Variance) < 1000 ? "check-circle" : "alert-triangle")"
                   style="width:24px;height:24px;color:@(Math.Abs(Variance) < 1000 ? "var(--pos-success)" : "var(--pos-danger)");display:block;margin:0 auto 8px;"></i>
                <div style="font-size:13px;font-weight:600;color:@(Math.Abs(Variance) < 1000 ? "var(--pos-success)" : "var(--pos-danger)");">
                    @(Math.Abs(Variance) < 1000 ? "Cân bằng" : "Có chênh lệch")
                </div>
            </div>

            @* EN: Drawer toggle / VI: Nút mở/đóng ngăn kéo *@
            <button style="padding:14px;border-radius:var(--pos-radius);border:none;background:var(--pos-bg-interactive);
                           color:var(--pos-text-primary);font-size:14px;font-weight:600;cursor:pointer;
                           display:flex;align-items:center;justify-content:center;gap:8px;"
                    @onclick="() => _drawerOpen = !_drawerOpen">
                <i data-lucide="@(_drawerOpen ? "lock" : "unlock")" style="width:16px;height:16px;"></i>
                @(_drawerOpen ? "Đóng ngăn kéo" : "Mở ngăn kéo")
            </button>

            @* EN: Save count button / VI: Nút lưu kiểm đếm *@
            <button class="pos-btn-checkout" style="width:100%;" @onclick="SaveCount">
                <i data-lucide="save" style="width:18px;height:18px;"></i>
                Lưu kiểm đếm
            </button>
        </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: Drawer state / VI: Trạng thái ngăn kéo
    private bool _drawerOpen = true;
    private readonly decimal _expectedCash = 2_450_000;

    // EN: Denomination data / VI: Dữ liệu mệnh giá
    private readonly List<Denomination> _denominations = new()
    {
        new(500_000, "Tờ 500K", 2),
        new(200_000, "Tờ 200K", 3),
        new(100_000, "Tờ 100K", 5),
        new(50_000,  "Tờ 50K",  4),
        new(20_000,  "Tờ 20K",  3),
        new(10_000,  "Tờ 10K",  5),
        new(5_000,   "Tờ 5K",   2),
        new(2_000,   "Tờ 2K",   3),
        new(1_000,   "Tờ 1K",   4),
        new(500,     "Xu 500",   6),
    };

    private decimal ActualTotal => _denominations.Sum(d => d.Value * d.Count);
    private decimal Variance => ActualTotal - _expectedCash;

    private void ChangeDenomCount(Denomination denom, int delta)
    {
        denom.Count = Math.Max(0, denom.Count + delta);
    }

    private void SaveCount() { }

    private class Denomination(decimal value, string label, int count)
    {
        public decimal Value { get; set; } = value;
        public string Label { get; set; } = label;
        public int Count { get; set; } = count;
    }
}
