@*
    EN: Stock Check — Product search/scan, stock across branches, recent movements, reorder suggestion.
    VI: Kiểm kho — Tìm/quét sản phẩm, tồn kho theo chi nhánh, biến động gần đây, gợi ý đặt hàng.
*@
@page "/pos/{ShopId:guid}/retail/stock-check"
@layout PosLayout
@inherits PosBase

<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("retail"))">
            <i data-lucide="arrow-left" style="width:14px;"></i> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">Kiểm kho nhanh</span>
    </div>

    @* ═══ SEARCH BAR / THANH TÌM KIẾM ═══ *@
    <div style="padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);">
        <div style="display:flex;gap:8px;">
            <div style="flex:1;display:flex;align-items:center;gap:8px;background:var(--pos-bg-interactive);border-radius:var(--pos-radius);padding:0 12px;">
                <i data-lucide="search" style="width:16px;height:16px;color:var(--pos-text-tertiary);"></i>
                <input type="text" @bind="_searchQuery" @bind:event="oninput"
                       placeholder="Tìm sản phẩm hoặc quét mã vạch..."
                       style="flex:1;background:transparent;border:none;color:var(--pos-text-primary);font-size:14px;
                              padding:10px 0;outline:none;font-family:inherit;" />
            </div>
            <button style="padding:10px 18px;border-radius:var(--pos-radius);border:none;background:var(--pos-orange-primary);
                           color:#fff;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;">
                <i data-lucide="scan-barcode" style="width:16px;height:16px;"></i> Quét
            </button>
        </div>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;">
        @* ═══ PRODUCT DETAILS / CHI TIẾT SẢN PHẨM ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;display:flex;gap:16px;align-items:center;">
            <div style="width:80px;height:80px;border-radius:12px;background:var(--pos-bg-interactive);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="shirt" style="width:36px;height:36px;color:var(--pos-text-tertiary);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:18px;font-weight:700;">@_product.Name</div>
                <div style="font-size:13px;color:var(--pos-text-tertiary);margin-top:4px;">@_product.Sku · @_product.Category</div>
                <div style="display:flex;gap:16px;margin-top:8px;">
                    <span style="font-size:16px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(_product.Price)</span>
                    <span style="font-size:13px;padding:4px 10px;border-radius:6px;font-weight:600;
                                 background:rgba(34,197,94,.15);color:var(--pos-success);">
                        Tổng: @_product.TotalStock SP
                    </span>
                </div>
            </div>
        </div>

        @* ═══ STOCK BY BRANCH / TỒN KHO THEO CHI NHÁNH ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="warehouse" style="width:18px;height:18px;color:var(--pos-text-tertiary);"></i>
                <span style="font-size:15px;font-weight:700;">Tồn kho theo chi nhánh</span>
            </div>

            @* EN: Branch stock table / VI: Bảng tồn kho chi nhánh *@
            <div style="border:1px solid var(--pos-border-subtle);border-radius:8px;overflow:hidden;">
                <div style="display:grid;grid-template-columns:1fr 100px 100px 100px;background:var(--pos-bg-interactive);padding:10px 14px;font-size:12px;font-weight:600;color:var(--pos-text-tertiary);">
                    <span>Chi nhánh</span>
                    <span style="text-align:center;">Tồn kho</span>
                    <span style="text-align:center;">Đã đặt</span>
                    <span style="text-align:center;">Trạng thái</span>
                </div>
                @foreach (var branch in _branchStock)
                {
                    <div style="display:grid;grid-template-columns:1fr 100px 100px 100px;padding:12px 14px;
                                border-top:1px solid var(--pos-border-subtle);font-size:13px;align-items:center;">
                        <div>
                            <div style="font-weight:600;">@branch.Name</div>
                            <div style="font-size:11px;color:var(--pos-text-tertiary);">@branch.Address</div>
                        </div>
                        <span style="text-align:center;font-weight:600;">@branch.Stock</span>
                        <span style="text-align:center;color:var(--pos-text-tertiary);">@branch.Reserved</span>
                        <div style="text-align:center;">
                            <span style="font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;
                                         background:@GetStockBg(branch.Stock);color:@GetStockColor(branch.Stock);">
                                @GetStockLabel(branch.Stock)
                            </span>
                        </div>
                    </div>
                }
            </div>
        </div>

        @* ═══ RECENT STOCK MOVEMENTS / BIẾN ĐỘNG KHO GẦN ĐÂY ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
                <i data-lucide="arrow-left-right" style="width:18px;height:18px;color:var(--pos-text-tertiary);"></i>
                <span style="font-size:15px;font-weight:700;">Biến động gần đây</span>
            </div>

            @foreach (var movement in _movements)
            {
                <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;display:flex;align-items:center;justify-content:center;
                                background:@(movement.Qty > 0 ? "rgba(34,197,94,.12)" : "rgba(239,68,68,.12)");">
                        <i data-lucide="@(movement.Qty > 0 ? "arrow-down" : "arrow-up")"
                           style="width:14px;height:14px;color:@(movement.Qty > 0 ? "var(--pos-success)" : "var(--pos-danger)");"></i>
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:13px;font-weight:600;">@movement.Description</div>
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">@movement.Date · @movement.Branch</div>
                    </div>
                    <span style="font-size:13px;font-weight:700;color:@(movement.Qty > 0 ? "var(--pos-success)" : "var(--pos-danger)");">
                        @(movement.Qty > 0 ? "+" : "")@movement.Qty
                    </span>
                </div>
            }
        </div>

        @* ═══ REORDER SUGGESTION / GỢI Ý ĐẶT HÀNG ═══ *@
        <div style="background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:var(--pos-radius);padding:16px;
                    display:flex;align-items:center;gap:14px;">
            <div style="width:44px;height:44px;border-radius:12px;background:rgba(245,158,11,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i data-lucide="alert-triangle" style="width:22px;height:22px;color:var(--pos-warning);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:14px;font-weight:700;color:var(--pos-warning);">Gợi ý đặt hàng</div>
                <div style="font-size:12px;color:var(--pos-text-secondary);margin-top:2px;">
                    Chi nhánh Quận 3 sắp hết hàng (còn 5 SP). Đề xuất nhập thêm 30 SP dựa trên tốc độ bán trung bình 15 SP/tuần.
                </div>
            </div>
            <button style="padding:10px 18px;border-radius:8px;border:none;background:var(--pos-warning);color:#fff;
                           font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;">
                Tạo đơn nhập
            </button>
        </div>
    </div>
</div>

@code {
    // EN: Static UI configuration — does not require DB data (needs inventory API) / VI: Cấu hình UI tĩnh — không cần dữ liệu từ DB (cần inventory API)

    private string _searchQuery = "Áo thun nam";
    private readonly StockProduct _product = new("Áo thun nam basic", "SKU-TT001", "Thời trang", 199_000, 72);

    // EN: Branch stock data / VI: Dữ liệu tồn kho chi nhánh
    private readonly List<BranchStock> _branchStock = new()
    {
        new("Chi nhánh Quận 1", "123 Nguyễn Huệ, Q.1", 32, 5),
        new("Chi nhánh Quận 3", "45 Võ Văn Tần, Q.3", 5, 2),
        new("Chi nhánh Quận 7", "789 Nguyễn Thị Thập, Q.7", 35, 8),
    };

    // EN: Recent movements / VI: Biến động gần đây
    private readonly List<StockMovement> _movements = new()
    {
        new("Bán hàng — Đơn #DH089", "25/01/2024", "Chi nhánh Q.1", -3),
        new("Nhập kho từ NCC", "24/01/2024", "Chi nhánh Q.7", 20),
        new("Bán hàng — Đơn #DH085", "24/01/2024", "Chi nhánh Q.3", -2),
        new("Chuyển kho Q.1 → Q.3", "23/01/2024", "Chi nhánh Q.3", 10),
        new("Chuyển kho Q.1 → Q.3", "23/01/2024", "Chi nhánh Q.1", -10),
        new("Bán hàng — Đơn #DH080", "22/01/2024", "Chi nhánh Q.1", -5),
    };

    private static string GetStockColor(int stock) => stock switch
    {
        <= 10 => "var(--pos-danger)",
        <= 20 => "var(--pos-warning)",
        _ => "var(--pos-success)"
    };

    private static string GetStockBg(int stock) => stock switch
    {
        <= 10 => "rgba(239,68,68,.15)",
        <= 20 => "rgba(245,158,11,.15)",
        _ => "rgba(34,197,94,.15)"
    };

    private static string GetStockLabel(int stock) => stock switch
    {
        <= 10 => "Sắp hết",
        <= 20 => "Thấp",
        _ => "Đủ"
    };

    private record StockProduct(string Name, string Sku, string Category, decimal Price, int TotalStock);
    private record BranchStock(string Name, string Address, int Stock, int Reserved);
    private record StockMovement(string Description, string Date, string Branch, int Qty);
}
