@*
    EN: Quick Sale — Numpad amount entry, category quick buttons, note field, pay button.
    VI: Bán nhanh — Bàn phím số nhập tiền, nút danh mục nhanh, ghi chú, nút thanh toán.
*@
@page "/pos/{ShopId:guid}/operations/quick-sale"
@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;">Bán nhanh</span>
    </div>

    <div style="flex:1;display:flex;overflow:hidden;">
        @* ═══ NUMPAD PANEL (LEFT) / BẢNG SỐ (TRÁI) ═══ *@
        <div style="flex:1;display:flex;flex-direction:column;padding:24px;align-items:center;justify-content:center;gap:24px;">
            @* EN: Amount display / VI: Hiển thị số tiền *@
            <div style="width:100%;max-width:420px;background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:24px;text-align:right;">
                <div style="font-size:12px;color:var(--pos-text-tertiary);margin-bottom:4px;">Số tiền</div>
                <div style="font-size:40px;font-weight:800;color:var(--pos-orange-primary);letter-spacing:1px;">
                    @FormatPrice(ParsedAmount)
                </div>
            </div>

            @* EN: Numpad grid / VI: Lưới bàn phím số *@
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px;">
                @foreach (var key in _numpadKeys)
                {
                    <button style="height:64px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                   background:@(key == "C" ? "rgba(239,68,68,.1)" : key == "⌫" ? "rgba(245,158,11,.1)" : "var(--pos-bg-elevated)");
                                   color:@(key == "C" ? "var(--pos-danger)" : key == "⌫" ? "var(--pos-warning)" : "var(--pos-text-primary)");
                                   font-size:@(key == "00" || key == "000" ? "16px" : "20px");font-weight:600;cursor:pointer;
                                   transition:all .15s ease;"
                            @onclick="() => OnKeyPress(key)">
                        @if (key == "⌫")
                        {
                            <i data-lucide="delete" style="width:20px;height:20px;"></i>
                        }
                        else
                        {
                            @key
                        }
                    </button>
                }
            </div>
        </div>

        @* ═══ RIGHT PANEL / PANEL PHẢI ═══ *@
        <div class="pos-cart-panel" style="width:340px;min-width:340px;">
            <div class="pos-cart-header">
                <span class="pos-cart-header__title">Thông tin</span>
            </div>

            <div class="pos-cart-items" style="padding:16px;">
                @* EN: Category quick buttons / VI: Nút danh mục nhanh *@
                <div style="margin-bottom:20px;">
                    <div style="font-size:13px;font-weight:600;margin-bottom:10px;">Danh mục</div>
                    <div style="display:flex;flex-wrap:wrap;gap:8px;">
                        @foreach (var cat in _quickCategories)
                        {
                            <button style="padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
                                           border:none;background:@(_selectedCategory == cat ? "var(--pos-orange-primary)" : "var(--pos-bg-interactive)");
                                           color:@(_selectedCategory == cat ? "#FFF" : "var(--pos-text-secondary)");"
                                    @onclick="() => _selectedCategory = cat">
                                @cat
                            </button>
                        }
                    </div>
                </div>

                @* EN: Note input / VI: Ghi chú *@
                <div style="margin-bottom:20px;">
                    <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Ghi chú</div>
                    <textarea @bind="_note" placeholder="Nhập ghi chú cho đơn hàng..."
                              style="width:100%;min-height:80px;padding:12px;border-radius:8px;border:1px solid var(--pos-border-default);
                                     background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;
                                     font-family:inherit;resize:vertical;outline:none;" />
                </div>

                @* EN: Quick amount buttons / VI: Nút số tiền nhanh *@
                <div>
                    <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Số tiền nhanh</div>
                    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px;">
                        @foreach (var amount in _quickAmounts)
                        {
                            <button style="padding:10px;border-radius:8px;border:1px solid var(--pos-border-default);
                                           background:transparent;color:var(--pos-text-primary);font-size:13px;font-weight:600;cursor:pointer;"
                                    @onclick="() => _amountStr = ((int)amount).ToString()">
                                @FormatPrice(amount)
                            </button>
                        }
                    </div>
                </div>
            </div>

            <div class="pos-cart-footer">
                <div class="pos-cart-total">
                    <span class="pos-cart-total__label">Tổng cộng</span>
                    <span class="pos-cart-total__value">@FormatPrice(ParsedAmount)</span>
                </div>
                <button class="pos-btn-checkout" @onclick="Pay" disabled="@(_amountStr == "" || _amountStr == "0")">
                    <i data-lucide="credit-card" style="width:18px;height:18px;"></i>
                    Thanh toán
                </button>
            </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: Amount input state / VI: Trạng thái nhập số tiền
    private string _amountStr = "";
    private decimal ParsedAmount => decimal.TryParse(_amountStr, out var v) ? v : 0m;
    private string _selectedCategory = "Khác";
    private string _note = "";

    // EN: Numpad keys / VI: Phím bàn số
    private readonly string[] _numpadKeys = { "7", "8", "9", "4", "5", "6", "1", "2", "3", "00", "0", "000", "C", "⌫", "." };

    // EN: Quick categories / VI: Danh mục nhanh
    private readonly string[] _quickCategories = { "Khác", "Phí dịch vụ", "Phụ thu" };

    // EN: Quick amount presets / VI: Số tiền mẫu nhanh
    private readonly decimal[] _quickAmounts = { 50_000, 100_000, 200_000, 500_000 };

    private void OnKeyPress(string key)
    {
        switch (key)
        {
            case "C":
                _amountStr = "";
                break;
            case "⌫":
                if (_amountStr.Length > 0)
                    _amountStr = _amountStr[..^1];
                break;
            case ".":
                break;
            default:
                if (_amountStr.Length < 12)
                    _amountStr += key;
                break;
        }
    }

    private void Pay() { }
}
