@*
    EN: Stock-Out Dialog — Product search, current stock, remove qty, reason, authorization, notes.
    VI: Xuất kho — Tìm sản phẩm, tồn kho hiện tại, SL xuất, lý do, xác nhận nhân viên, ghi chú.
*@
@page "/pos/{ShopId:guid}/dialog/stock-out"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<div class="pos-dialog-overlay">
    <div style="width:100%;max-width:540px;background:var(--pos-bg-elevated);border-radius:16px;
                display:flex;flex-direction:column;max-height:90vh;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(239,68,68,.15);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="package-minus" style="width:20px;height:20px;color:var(--pos-danger);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:18px;font-weight:700;">Xuất kho</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Xuất hàng hóa khỏi kho</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;">
            @* ═══ PRODUCT SEARCH / TÌM SẢN PHẨM ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Sản phẩm</div>
                <input type="text" @bind="_productSearch" placeholder="Tìm sản phẩm hoặc mã SKU..."
                       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;box-sizing:border-box;" />
            </div>

            @* ═══ SELECTED PRODUCT / SẢN PHẨM ĐÃ CHỌN ═══ *@
            <div style="background:var(--pos-bg-interactive);border-radius:var(--pos-radius);padding:16px;margin-bottom:20px;">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
                    <div>
                        <div style="font-size:15px;font-weight:700;">@_selectedProduct</div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);">SKU: @_selectedSku</div>
                    </div>
                </div>
                @* EN: Current stock level / VI: Mức tồn kho hiện tại *@
                <div style="display:flex;gap:12px;">
                    <div style="flex:1;background:var(--pos-bg-elevated);border-radius:8px;padding:10px;text-align:center;">
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">Tồn kho</div>
                        <div style="font-size:20px;font-weight:700;color:@(_currentStock <= 10 ? "var(--pos-danger)" : "var(--pos-success)");">@_currentStock</div>
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">@_unit</div>
                    </div>
                    <div style="flex:1;background:var(--pos-bg-elevated);border-radius:8px;padding:10px;text-align:center;">
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">Sau xuất</div>
                        <div style="font-size:20px;font-weight:700;color:@((_currentStock - _removeQty) <= 5 ? "var(--pos-danger)" : "var(--pos-text-primary)");">@(_currentStock - _removeQty)</div>
                        <div style="font-size:11px;color:var(--pos-text-tertiary);">@_unit</div>
                    </div>
                </div>
            </div>

            @* ═══ QUANTITY TO REMOVE / SỐ LƯỢNG XUẤT ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Số lượng xuất</div>
                <div style="display:flex;align-items:center;gap:10px;">
                    <button style="width:40px;height:40px;border-radius:8px;border:1px solid var(--pos-border-default);
                                   background:var(--pos-bg-interactive);color:var(--pos-text-primary);cursor:pointer;font-size:18px;"
                            @onclick="() => _removeQty = Math.Max(1, _removeQty - 1)">−</button>
                    <input type="number" @bind="_removeQty" min="1" max="@_currentStock"
                           style="width:100px;padding:12px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                                  background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:18px;font-weight:700;text-align:center;" />
                    <button style="width:40px;height:40px;border-radius:8px;border:1px solid var(--pos-border-default);
                                   background:var(--pos-bg-interactive);color:var(--pos-text-primary);cursor:pointer;font-size:18px;"
                            @onclick="() => _removeQty = Math.Min(_currentStock, _removeQty + 1)">+</button>
                    <span style="font-size:13px;color:var(--pos-text-tertiary);">@_unit</span>
                </div>
            </div>

            @* ═══ REASON / LÝ DO ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Lý do xuất kho</div>
                <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    @foreach (var reason in _reasons)
                    {
                        <button style="padding:10px 16px;border-radius:var(--pos-radius);border:2px solid @(_selectedReason == reason ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                       background:@(_selectedReason == reason ? "rgba(255,92,0,.1)" : "var(--pos-bg-interactive)");
                                       color:var(--pos-text-primary);cursor:pointer;font-size:13px;"
                                @onclick="() => _selectedReason = reason">
                            @reason
                        </button>
                    }
                </div>
            </div>

            @* ═══ AUTHORIZED BY / NHÂN VIÊN XÁC NHẬN ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Nhân viên xác nhận</div>
                <select @bind="_authorizedBy"
                        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;">
                    <option value="">— Chọn nhân viên —</option>
                    @foreach (var staff in _staffList)
                    {
                        <option value="@staff">@staff</option>
                    }
                </select>
            </div>

            @* ═══ NOTES / GHI CHÚ ═══ *@
            <div>
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Ghi chú</div>
                <textarea @bind="_notes" rows="2" placeholder="Chi tiết thêm..."
                          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-danger);color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                    @onclick="ConfirmStockOut">
                <i data-lucide="package-minus" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>
                Xác nhận xuất 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: Stock-out state / VI: Trạng thái xuất kho
    private string _productSearch = "Sữa tươi";
    private string _selectedProduct = "Sữa tươi TH True Milk";
    private string _selectedSku = "STM-1L";
    private int _currentStock = 48;
    private string _unit = "hộp";
    private int _removeQty = 5;
    private string _selectedReason = "Hư hỏng";
    private string _authorizedBy = "Trần Văn C";
    private string _notes = "5 hộp bị phồng, hạn còn 2 ngày";

    // EN: Reasons / VI: Lý do
    private readonly string[] _reasons =
    {
        "Hư hỏng", "Hết hạn", "Chuyển kho", "Tiêu thụ nội bộ", "Khác"
    };

    // EN: Staff list / VI: Danh sách nhân viên
    private readonly string[] _staffList =
    {
        "Nguyễn Văn A", "Trần Văn C", "Lê Thị D", "Phạm Minh E"
    };

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