@*
    EN: Returns & Exchanges — Receipt lookup, original order items, select returns, refund method, confirm.
    VI: Đổi trả hàng — Tra cứu hóa đơn, món gốc, chọn trả, phương thức hoàn tiền, xác nhận.
*@
@page "/pos/{ShopId:guid}/retail/return-exchange"
@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;">Đổi trả hàng</span>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;display:flex;gap:16px;">
        @* ═══ LEFT: RECEIPT LOOKUP + ITEMS / TRÁI: TRA CỨU HÓA ĐƠN + DANH SÁCH MÓN ═══ *@
        <div style="flex:1;display:flex;flex-direction:column;gap:16px;">
            @* EN: Receipt lookup / VI: Tra cứu hóa đơn *@
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Tra cứu hóa đơn</div>
                <div style="display:flex;gap:8px;">
                    <div style="flex:1;display:flex;align-items:center;gap:8px;background:var(--pos-bg-interactive);border-radius:8px;padding:0 12px;">
                        <i data-lucide="receipt" style="width:14px;height:14px;color:var(--pos-text-tertiary);"></i>
                        <input type="text" @bind="_receiptInput" placeholder="Nhập số hóa đơn hoặc quét mã..."
                               style="flex:1;background:transparent;border:none;color:var(--pos-text-primary);font-size:13px;
                                      padding:10px 0;outline:none;font-family:inherit;" />
                    </div>
                    <button style="padding:10px 18px;border-radius:8px;border:none;background:var(--pos-orange-primary);color:#fff;
                                   font-size:13px;font-weight:600;cursor:pointer;" @onclick="LookupReceipt">
                        <i data-lucide="search" style="width:14px;height:14px;display:inline;"></i> Tìm
                    </button>
                </div>
            </div>

            @if (_receiptFound)
            {
                @* EN: Original order info / VI: Thông tin đơn gốc *@
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                        <div>
                            <div style="font-size:15px;font-weight:700;">Hóa đơn #@_receipt.Id</div>
                            <div style="font-size:12px;color:var(--pos-text-tertiary);">@_receipt.Date · @_receipt.Staff</div>
                        </div>
                        <span style="font-size:14px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(_receipt.Total)</span>
                    </div>

                    @* EN: Select items to return / VI: Chọn sản phẩm trả lại *@
                    <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Chọn sản phẩm đổi trả</div>
                    @foreach (var item in _receipt.Items)
                    {
                        <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                            <input type="checkbox" checked="@item.Selected"
                                   @onchange="() => item.Selected = !item.Selected"
                                   style="width:18px;height:18px;accent-color:var(--pos-orange-primary);cursor:pointer;" />
                            <div style="flex:1;">
                                <div style="font-size:13px;font-weight:600;">@item.Name</div>
                                <div style="font-size:11px;color:var(--pos-text-tertiary);">@item.Sku · SL: @item.Qty</div>
                            </div>
                            <span style="font-size:13px;font-weight:600;">@FormatPrice(item.Price * item.Qty)</span>
                        </div>
                    }
                </div>
            }
        </div>

        @* ═══ RIGHT: RETURN DETAILS / PHẢI: CHI TIẾT ĐỔI TRẢ ═══ *@
        <div class="pos-cart-panel" style="width:340px;min-width:340px;">
            <div class="pos-cart-header">
                <span class="pos-cart-header__title">Chi tiết đổi trả</span>
            </div>

            <div class="pos-cart-items" style="padding:16px;">
                @if (_receiptFound && SelectedItems.Any())
                {
                    @* EN: Selected return items / VI: Sản phẩm đã chọn trả *@
                    <div style="margin-bottom:16px;">
                        <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Sản phẩm trả (@SelectedItems.Count())</div>
                        @foreach (var item in SelectedItems)
                        {
                            <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;
                                        border-bottom:1px solid var(--pos-border-subtle);">
                                <span>@item.Name x@item.Qty</span>
                                <span style="color:var(--pos-danger);">-@FormatPrice(item.Price * item.Qty)</span>
                            </div>
                        }
                    </div>

                    @* EN: Return reason / VI: Lý do đổi trả *@
                    <div style="margin-bottom:16px;">
                        <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Lý do</div>
                        <select @bind="_returnReason"
                                style="width:100%;padding:10px;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;">
                            <option value="">Chọn lý do...</option>
                            <option value="defective">Lỗi sản phẩm</option>
                            <option value="wrong_size">Sai kích cỡ</option>
                            <option value="wrong_item">Sai sản phẩm</option>
                            <option value="changed_mind">Đổi ý</option>
                            <option value="other">Lý do khác</option>
                        </select>
                    </div>

                    @* EN: Refund method / VI: Phương thức hoàn tiền *@
                    <div style="margin-bottom:16px;">
                        <div style="font-size:13px;font-weight:600;margin-bottom:8px;">Phương thức hoàn tiền</div>
                        <div style="display:flex;flex-direction:column;gap:8px;">
                            @foreach (var method in _refundMethods)
                            {
                                <button style="padding:12px;border-radius:8px;text-align:left;cursor:pointer;
                                               border:1px solid @(_selectedRefundMethod == method.Key ? "var(--pos-orange-primary)" : "var(--pos-border-default)");
                                               background:@(_selectedRefundMethod == method.Key ? "rgba(255,92,0,.08)" : "transparent");
                                               color:var(--pos-text-primary);font-size:13px;"
                                        @onclick="() => _selectedRefundMethod = method.Key">
                                    <div style="font-weight:600;">@method.Label</div>
                                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:2px;">@method.Description</div>
                                </button>
                            }
                        </div>
                    </div>

                    @* EN: Refund amount / VI: Số tiền hoàn *@
                    <div style="background:var(--pos-bg-interactive);border-radius:8px;padding:14px;text-align:center;">
                        <div style="font-size:12px;color:var(--pos-text-tertiary);">Số tiền hoàn trả</div>
                        <div style="font-size:24px;font-weight:800;color:var(--pos-danger);margin-top:4px;">
                            @FormatPrice(RefundAmount)
                        </div>
                    </div>
                }
                else
                {
                    <div style="text-align:center;padding:32px 16px;color:var(--pos-text-tertiary);font-size:13px;">
                        Tra cứu hóa đơn và chọn sản phẩm để đổi trả
                    </div>
                }
            </div>

            @if (_receiptFound && SelectedItems.Any())
            {
                <div class="pos-cart-footer">
                    <button class="pos-btn-checkout" @onclick="ConfirmReturn">
                        <i data-lucide="rotate-ccw" style="width:18px;height:18px;"></i>
                        Xác nhận đổi trả
                    </button>
                </div>
            }
        </div>
    </div>
</div>

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

    private string _receiptInput = "R2024001234";
    private bool _receiptFound = true;
    private string _returnReason = "";
    private string _selectedRefundMethod = "original";

    // EN: Refund methods / VI: Phương thức hoàn tiền
    private readonly List<RefundMethod> _refundMethods = new()
    {
        new("original", "Hoàn về phương thức gốc", "Hoàn tiền về thẻ/TK ban đầu"),
        new("cash", "Tiền mặt", "Hoàn tiền mặt tại quầy"),
        new("credit", "Tín dụng cửa hàng", "Cộng vào tài khoản khách hàng"),
    };

    // EN: Demo receipt / VI: Hóa đơn mẫu
    private readonly Receipt _receipt = new("R2024001234", "15/01/2024 · 14:30", "Trần Thị B", 1_619_000, new()
    {
        new("Áo thun nam basic", "SKU-TT001", 199_000, 2, true),
        new("Túi xách da nữ", "SKU-PK001", 890_000, 1, false),
        new("Kính mát thời trang", "SKU-PK003", 280_000, 1, false),
        new("Bình giữ nhiệt 500ml", "SKU-GD002", 180_000, 1, false),
    });

    private IEnumerable<ReceiptItem> SelectedItems => _receipt.Items.Where(i => i.Selected);
    private decimal RefundAmount => SelectedItems.Sum(i => i.Price * i.Qty);

    private void LookupReceipt() => _receiptFound = true;
    private void ConfirmReturn() { }

    private record RefundMethod(string Key, string Label, string Description);
    private record Receipt(string Id, string Date, string Staff, decimal Total, List<ReceiptItem> Items);
    private class ReceiptItem(string name, string sku, decimal price, int qty, bool selected)
    {
        public string Name { get; set; } = name;
        public string Sku { get; set; } = sku;
        public decimal Price { get; set; } = price;
        public int Qty { get; set; } = qty;
        public bool Selected { get; set; } = selected;
    }
}
