@*
    EN: Quick Stock-In Dialog — Product search, qty, supplier, unit cost, lot, expiry, notes, recent log.
    VI: Nhập kho nhanh — Tìm sản phẩm, SL, nhà cung cấp, giá nhập, lô, hạn dùng, ghi chú, lịch sử gần đây.
*@
@page "/pos/{ShopId:guid}/dialog/stock-in"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<div class="pos-dialog-overlay">
    <div style="width:100%;max-width:600px;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(34,197,94,.15);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="package-plus" style="width:20px;height:20px;color:var(--pos-success);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:18px;font-weight:700;">Nhập kho</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Nhập hàng hóa vào 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>
                <div style="display:flex;gap:8px;">
                    <input type="text" @bind="_productSearch" placeholder="Tìm sản phẩm hoặc mã SKU..."
                           style="flex:1;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;" />
                    <button style="padding:12px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);
                                   border:1px solid var(--pos-border-default);color:var(--pos-text-primary);cursor:pointer;">
                        <i data-lucide="scan-barcode" style="width:18px;height:18px;"></i>
                    </button>
                </div>
                @if (!string.IsNullOrEmpty(_selectedProduct))
                {
                    <div style="margin-top:10px;padding:12px;background:rgba(34,197,94,.08);border-radius:var(--pos-radius);
                                border:1px solid rgba(34,197,94,.2);display:flex;align-items:center;gap:10px;">
                        <i data-lucide="check-circle" style="width:18px;height:18px;color:var(--pos-success);"></i>
                        <div>
                            <div style="font-size:14px;font-weight:600;">@_selectedProduct</div>
                            <div style="font-size:12px;color:var(--pos-text-tertiary);">SKU: @_selectedSku · Tồn kho: @_currentStock</div>
                        </div>
                    </div>
                }
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                @* ═══ QUANTITY / SỐ LƯỢNG ═══ *@
                <div>
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Số lượng nhập</div>
                    <input type="number" @bind="_quantity" min="1"
                           style="width:100%;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:16px;font-weight:600;box-sizing:border-box;" />
                </div>

                @* ═══ UNIT COST / GIÁ NHẬP ═══ *@
                <div>
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Giá nhập (₫/đơn vị)</div>
                    <input type="number" @bind="_unitCost"
                           style="width:100%;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:16px;font-weight:600;box-sizing:border-box;" />
                </div>
            </div>

            @* ═══ SUPPLIER / NHÀ CUNG CẤP ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Nhà cung cấp</div>
                <select @bind="_supplier"
                        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à cung cấp —</option>
                    @foreach (var s in _suppliers)
                    {
                        <option value="@s">@s</option>
                    }
                </select>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                @* ═══ LOT / LÔ HÀNG ═══ *@
                <div>
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Số lô / Batch</div>
                    <input type="text" @bind="_lotNumber" placeholder="VD: LOT-2026-0215"
                           style="width:100%;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:14px;box-sizing:border-box;" />
                </div>

                @* ═══ EXPIRY / HẠN DÙNG ═══ *@
                <div>
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Hạn sử dụng</div>
                    <input type="date" @bind="_expiryDate"
                           style="width:100%;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:14px;box-sizing:border-box;" />
                </div>
            </div>

            @* ═══ NOTES / GHI CHÚ ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Ghi chú</div>
                <textarea @bind="_notes" rows="2" placeholder="Ghi chú 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>

            @* ═══ TOTAL COST / TỔNG CHI PHÍ ═══ *@
            <div style="display:flex;justify-content:space-between;padding:14px;background:var(--pos-bg-interactive);
                        border-radius:var(--pos-radius);margin-bottom:20px;">
                <span style="font-size:14px;font-weight:600;">Tổng chi phí nhập</span>
                <span style="font-size:18px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(_quantity * _unitCost)</span>
            </div>

            @* ═══ RECENT LOG / NHẬT KÝ GẦN ĐÂY ═══ *@
            <div>
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Nhập kho gần đây</div>
                @foreach (var log in _recentLogs)
                {
                    <div style="display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);font-size:12px;">
                        <i data-lucide="package" style="width:14px;height:14px;color:var(--pos-text-tertiary);"></i>
                        <div style="flex:1;">
                            <span style="font-weight:500;">@log.Product</span>
                            <span style="color:var(--pos-text-tertiary);"> · @log.Qty @log.Unit</span>
                        </div>
                        <span style="color:var(--pos-text-tertiary);">@log.Time</span>
                    </div>
                }
            </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-success);color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                    @onclick="ConfirmStockIn">
                <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>
                Xác nhận nhập 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-in state — will be loaded from Inventory API. No hardcoded values in production.
    // VI: Trạng thái nhập kho — sẽ tải từ Inventory API. Không hardcode giá trị trong production.
    private string _productSearch = "";
    private string _selectedProduct = "";
    private string _selectedSku = "";
    private int _currentStock = 0;
    private int _quantity = 0;
    private decimal _unitCost = 0;
    private string _supplier = "";
    private string _lotNumber = "";
    private DateTime _expiryDate = DateTime.Now.AddMonths(6);
    private string _notes = "";

    // EN: Suppliers / VI: Nhà cung cấp
    private readonly string[] _suppliers =
    {
        "Công ty TNHH Cà phê Đà Lạt",
        "Nhà phân phối Sài Gòn Food",
        "Đại lý nông sản Tây Nguyên",
        "Công ty CP Thực phẩm Miền Nam",
    };

    // EN: Recent stock-in log / VI: Nhật ký nhập gần đây
    private readonly List<StockLog> _recentLogs = new()
    {
        new("Cà phê hạt Robusta", 30, "kg", "Hôm nay 09:15"),
        new("Sữa tươi TH", 100, "hộp", "Hôm nay 08:30"),
        new("Đường trắng", 20, "kg", "Hôm qua 16:00"),
        new("Trà ô long", 15, "kg", "Hôm qua 14:20"),
        new("Ly giấy 16oz", 500, "cái", "25/02/2026"),
    };

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

    private record StockLog(string Product, int Qty, string Unit, string Time);
}
