@*
    EN: Stock Transfer — Transfer products between branches with product list, qty, delivery note.
    VI: Chuyển kho — Chuyển sản phẩm giữa chi nhánh với danh sách, SL, phiếu giao hàng.
*@
@page "/pos/{ShopId:guid}/dialog/stock-transfer"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<div class="pos-dialog-overlay">
    <div style="width:100%;max-width:680px;background:var(--pos-bg-elevated);border-radius:16px;
                display:flex;flex-direction:column;max-height:92vh;overflow:hidden;">

        @* ═══ HEADER / TIÊU ĐỀ ═══ *@
        <div style="padding:20px 24px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
            <div style="width:40px;height:40px;border-radius:10px;background:rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="arrow-left-right" style="width:20px;height:20px;color:#3B82F6;"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:18px;font-weight:700;">Chuyển kho</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Chuyển hàng giữa các chi nhánh</div>
            </div>
            <button style="background:none;border:none;color:var(--pos-text-tertiary);cursor:pointer;padding:8px;"
                    @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>

        <div style="flex:1;overflow-y:auto;padding:24px;">
            @* ═══ BRANCH SELECTION / CHỌN CHI NHÁNH ═══ *@
            <div style="display:flex;gap:12px;align-items:center;margin-bottom:24px;">
                <div style="flex:1;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:8px;">Từ chi nhánh</div>
                    <select @bind="_fromBranch"
                            style="width:100%;padding:12px 14px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                   background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:14px;appearance:auto;">
                        @foreach (var b in _branches)
                        {
                            <option value="@b">@b</option>
                        }
                    </select>
                </div>
                <div style="padding-top:24px;">
                    <i data-lucide="arrow-right" style="width:24px;height:24px;color:var(--pos-orange-primary);"></i>
                </div>
                <div style="flex:1;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:8px;">Đến chi nhánh</div>
                    <select @bind="_toBranch"
                            style="width:100%;padding:12px 14px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                   background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:14px;appearance:auto;">
                        @foreach (var b in _branches)
                        {
                            <option value="@b">@b</option>
                        }
                    </select>
                </div>
            </div>

            @* ═══ ADD PRODUCT ROW / THÊM SẢN PHẨM ═══ *@
            <div style="margin-bottom:16px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Thêm sản phẩm</div>
                <div style="display:flex;gap:8px;">
                    <input type="text" @bind="_addProductSearch" placeholder="Tìm sản phẩm..."
                           style="flex:1;padding:10px 14px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                  background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;" />
                    <input type="number" @bind="_addQty" min="1" placeholder="SL"
                           style="width:80px;padding:10px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                  background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;text-align:center;" />
                    <button style="padding:10px 16px;border-radius:var(--pos-radius);background:var(--pos-orange-primary);
                                   border:none;color:#fff;cursor:pointer;font-size:13px;font-weight:600;"
                            @onclick="AddTransferItem">
                        <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle;"></i> Thêm
                    </button>
                </div>
            </div>

            @* ═══ TRANSFER LIST / DANH SÁCH CHUYỂN ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Danh sách sản phẩm chuyển</div>
                <div style="border:1px solid var(--pos-border-default);border-radius:var(--pos-radius);overflow:hidden;">
                    @* EN: Table header / VI: Tiêu đề bảng *@
                    <div style="display:flex;padding:10px 14px;background:var(--pos-bg-interactive);font-size:12px;font-weight:600;color:var(--pos-text-tertiary);">
                        <span style="flex:2;">Sản phẩm</span>
                        <span style="width:60px;text-align:center;">Tồn kho</span>
                        <span style="width:80px;text-align:center;">SL chuyển</span>
                        <span style="width:90px;text-align:right;">Giá trị</span>
                        <span style="width:36px;"></span>
                    </div>
                    @foreach (var item in _transferItems)
                    {
                        <div style="display:flex;align-items:center;padding:12px 14px;border-top:1px solid var(--pos-border-subtle);font-size:13px;">
                            <div style="flex:2;">
                                <div style="font-weight:500;">@item.Name</div>
                                <div style="font-size:11px;color:var(--pos-text-tertiary);">@item.Sku</div>
                            </div>
                            <span style="width:60px;text-align:center;color:var(--pos-text-tertiary);">@item.Stock</span>
                            <div style="width:80px;display:flex;justify-content:center;">
                                <input type="number" @bind="item.Qty" min="1" max="@item.Stock"
                                       style="width:56px;padding:6px;border-radius:6px;border:1px solid var(--pos-border-default);
                                              background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;text-align:center;" />
                            </div>
                            <span style="width:90px;text-align:right;font-weight:600;">@FormatPrice(item.UnitPrice * item.Qty)</span>
                            <button style="width:36px;background:none;border:none;color:var(--pos-danger);cursor:pointer;text-align:center;"
                                    @onclick="() => _transferItems.Remove(item)">
                                <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                            </button>
                        </div>
                    }
                </div>
            </div>

            @* ═══ TRANSFER SUMMARY / TÓM TẮT CHUYỂN ═══ *@
            <div style="display:flex;justify-content:space-between;padding:14px;background:var(--pos-bg-interactive);
                        border-radius:var(--pos-radius);margin-bottom:20px;">
                <div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Tổng sản phẩm</div>
                    <div style="font-size:16px;font-weight:700;">@_transferItems.Count mặt hàng</div>
                </div>
                <div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Tổng số lượng</div>
                    <div style="font-size:16px;font-weight:700;">@_transferItems.Sum(i => i.Qty)</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">Tổng giá trị</div>
                    <div style="font-size:16px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(_transferItems.Sum(i => i.UnitPrice * i.Qty))</div>
                </div>
            </div>

            @* ═══ DELIVERY NOTE / GHI CHÚ GIAO HÀNG ═══ *@
            <div>
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Ghi chú giao hàng</div>
                <textarea @bind="_deliveryNote" rows="2" placeholder="Ghi chú cho phiếu chuyển kho..."
                          style="width:100%;padding:10px 14px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                 background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;resize:vertical;box-sizing:border-box;"></textarea>
            </div>
        </div>

        @* ═══ FOOTER / CUỐI TRANG ═══ *@
        <div style="padding:16px 24px;border-top:1px solid var(--pos-border-subtle);display:flex;gap:10px;">
            <button style="flex:1;padding:14px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                           background:transparent;color:var(--pos-text-primary);cursor:pointer;font-size:14px;"
                    @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
                Hủy
            </button>
            <button style="flex:2;padding:14px;border-radius:var(--pos-radius);border:none;
                           background:var(--pos-orange-primary);color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                    @onclick="CreateTransfer">
                <i data-lucide="send" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>
                Tạo phiếu chuyển kho
            </button>
        </div>
    </div>
</div>

@code {
    // EN: Dialog data — populated from current context (selected order/product).
    // VI: Dữ liệu dialog — được điền từ context hiện tại (đơn hàng/sản phẩm đã chọn).
    // TODO: Integrate with Order/Catalog/Inventory APIs when DDD Value Object mapping is fixed.

    // EN: Transfer state / VI: Trạng thái chuyển kho
    private string _fromBranch = "Chi nhánh Q1";
    private string _toBranch = "Chi nhánh Q7";
    private string _addProductSearch = "";
    private int _addQty = 10;
    private string _deliveryNote = "";

    // EN: Branches / VI: Chi nhánh
    private readonly string[] _branches =
    {
        "Chi nhánh Q1", "Chi nhánh Q3", "Chi nhánh Q7", "Chi nhánh Thủ Đức", "Chi nhánh Bình Thạnh"
    };

    // EN: Demo transfer items / VI: Danh sách mẫu
    private readonly List<TransferItem> _transferItems = new()
    {
        new("Cà phê hạt Arabica", "CF-ARA-500", 120, 185_000, 20),
        new("Trà ô long", "TO-OL-250", 85, 95_000, 15),
        new("Sữa tươi TH 1L", "STM-1L", 200, 32_000, 50),
        new("Ly giấy 16oz", "LG-16", 1200, 2_500, 300),
    };

    private void AddTransferItem()
    {
        if (!string.IsNullOrWhiteSpace(_addProductSearch))
        {
            _transferItems.Add(new TransferItem(_addProductSearch, "NEW-SKU", 100, 50_000, _addQty));
            _addProductSearch = "";
            _addQty = 10;
        }
    }

    private async Task CreateTransfer() => await JS.InvokeVoidAsync("history.back");

    private class TransferItem(string name, string sku, int stock, decimal unitPrice, int qty)
    {
        public string Name { get; set; } = name;
        public string Sku { get; set; } = sku;
        public int Stock { get; set; } = stock;
        public decimal UnitPrice { get; set; } = unitPrice;
        public int Qty { get; set; } = qty;
    }
}
