@*
    EN: Void / Refund Dialog — Order lookup, void vs refund selection, reason, manager PIN, confirm.
    VI: Hủy / Hoàn tiền — Tra cứu đơn hàng, chọn hủy hay hoàn tiền, lý do, mã PIN quản lý, xác nhận.
*@
@page "/pos/{ShopId:guid}/dialog/void-refund"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<div class="pos-dialog-overlay">
    <div style="width:100%;max-width:560px;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="rotate-ccw" style="width:20px;height:20px;color:var(--pos-danger);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:18px;font-weight:700;">Hủy / Hoàn tiền</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Void / Refund đơn hàng</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;">
            @if (!_orderFound)
            {
                @* ═══ ORDER LOOKUP / TRA CỨU ĐƠN HÀNG ═══ *@
                <div style="text-align:center;padding:24px 0;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:16px;">Nhập mã đơn hàng</div>
                    <div style="display:flex;gap:10px;max-width:360px;margin:0 auto;">
                        <input type="text" @bind="_orderNumber" placeholder="VD: DH2024-0567"
                               style="flex:1;padding:12px 16px;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 20px;border-radius:var(--pos-radius);background:var(--pos-orange-primary);
                                       border:none;color:#fff;font-weight:600;cursor:pointer;font-size:14px;"
                                @onclick="LookupOrder">
                            <i data-lucide="search" style="width:16px;height:16px;vertical-align:middle;"></i> Tra cứu
                        </button>
                    </div>
                </div>
            }
            else
            {
                @* ═══ ORDER DETAILS / CHI TIẾT ĐƠN HÀNG ═══ *@
                <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:12px;">
                        <div>
                            <span style="font-size:15px;font-weight:700;">Đơn #@_orderNumber</span>
                            <span style="font-size:12px;color:var(--pos-text-tertiary);margin-left:8px;">14:32 — 26/02/2026</span>
                        </div>
                        <span style="font-size:12px;padding:4px 10px;border-radius:6px;background:rgba(34,197,94,.15);color:var(--pos-success);font-weight:600;">
                            Đã thanh toán
                        </span>
                    </div>
                    @foreach (var item in _orderItems)
                    {
                        <div style="display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid var(--pos-border-subtle);">
                            <span>x@(item.Qty) @item.Name</span>
                            <span style="font-weight:600;">@FormatPrice(item.Price * item.Qty)</span>
                        </div>
                    }
                    <div style="display:flex;justify-content:space-between;padding-top:10px;font-size:15px;font-weight:700;">
                        <span>Tổng cộng</span>
                        <span style="color:var(--pos-orange-primary);">@FormatPrice(_orderTotal)</span>
                    </div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:6px;">
                        Thanh toán: Tiền mặt · PV: Nguyễn Văn A
                    </div>
                </div>

                @* ═══ TYPE SELECTION / CHỌN LOẠI ═══ *@
                <div style="margin-bottom:20px;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Loại xử lý</div>
                    <div style="display:flex;gap:10px;">
                        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);border:2px solid @(_type == "void" ? "var(--pos-danger)" : "var(--pos-border-default)");
                                       background:@(_type == "void" ? "rgba(239,68,68,.1)" : "var(--pos-bg-interactive)");color:var(--pos-text-primary);cursor:pointer;text-align:center;"
                                @onclick='() => _type = "void"'>
                            <i data-lucide="x-circle" style="width:20px;height:20px;display:block;margin:0 auto 6px;color:var(--pos-danger);"></i>
                            <div style="font-size:14px;font-weight:600;">Hủy đơn (Void)</div>
                            <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">Xóa hoàn toàn đơn hàng</div>
                        </button>
                        <button style="flex:1;padding:14px;border-radius:var(--pos-radius);border:2px solid @(_type == "refund" ? "var(--pos-warning)" : "var(--pos-border-default)");
                                       background:@(_type == "refund" ? "rgba(245,158,11,.1)" : "var(--pos-bg-interactive)");color:var(--pos-text-primary);cursor:pointer;text-align:center;"
                                @onclick='() => _type = "refund"'>
                            <i data-lucide="undo-2" style="width:20px;height:20px;display:block;margin:0 auto 6px;color:var(--pos-warning);"></i>
                            <div style="font-size:14px;font-weight:600;">Hoàn tiền (Refund)</div>
                            <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">Trả lại tiền cho khách</div>
                        </button>
                    </div>
                </div>

                @* ═══ REASON SELECTION / CHỌN LÝ DO ═══ *@
                <div style="margin-bottom:20px;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Lý do</div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                        @foreach (var reason in _reasons)
                        {
                            <button style="padding:10px 14px;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;text-align:left;"
                                    @onclick="() => _selectedReason = reason">
                                @reason
                            </button>
                        }
                    </div>
                </div>

                @if (_type == "refund")
                {
                    @* ═══ REFUND AMOUNT / SỐ TIỀN HOÀN TRẢ ═══ *@
                    <div style="margin-bottom:20px;">
                        <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Số tiền hoàn trả</div>
                        <div style="display:flex;gap:10px;align-items:center;">
                            <input type="number" @bind="_refundAmount"
                                   style="flex:1;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;" />
                            <span style="font-size:14px;color:var(--pos-text-tertiary);">/ @FormatPrice(_orderTotal)</span>
                        </div>
                    </div>
                }

                @* ═══ MANAGER PIN / MÃ PIN QUẢN LÝ ═══ *@
                <div style="margin-bottom:20px;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Mã PIN quản lý</div>
                    <div style="display:flex;gap:8px;">
                        @for (var i = 0; i < 4; i++)
                        {
                            var idx = i;
                            <input type="password" maxlength="1"
                                   style="width:48px;height:48px;text-align:center;font-size:20px;font-weight:700;
                                          border-radius:var(--pos-radius);border:2px solid var(--pos-border-default);
                                          background:var(--pos-bg-interactive);color:var(--pos-text-primary);" />
                        }
                    </div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:6px;">Yêu cầu xác nhận từ quản lý</div>
                </div>
            }
        </div>

        @if (_orderFound)
        {
            @* ═══ ACTIONS / HÀNH ĐỘNG ═══ *@
            <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;font-weight:500;"
                        @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
                    Hủy bỏ
                </button>
                <button style="flex:1;padding:14px;border-radius:var(--pos-radius);border:none;
                               background:var(--pos-danger);color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                        @onclick="ConfirmAction">
                    <i data-lucide="alert-triangle" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>
                    @(_type == "void" ? "Xác nhận hủy đơn" : $"Hoàn trả {FormatPrice(_refundAmount)}")
                </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: Order lookup state / VI: Trạng thái tra cứu đơn
    private string _orderNumber = "DH2024-0567";
    private bool _orderFound = false;
    private string _type = "void";
    private string _selectedReason = "";
    private decimal _refundAmount = 285_000;
    private decimal _orderTotal = 285_000;

    // EN: Reason options / VI: Các lý do
    private readonly string[] _reasons =
    {
        "Khách yêu cầu", "Sai đơn hàng", "Vấn đề chất lượng", "Khác"
    };

    // EN: Demo order items / VI: Mục đơn hàng mẫu
    private readonly List<OrderItem> _orderItems = new()
    {
        new("Phở bò tái", 75_000, 2),
        new("Gỏi cuốn tôm thịt", 45_000, 1),
        new("Trà đá", 10_000, 3),
        new("Bánh flan", 25_000, 2),
    };

    private void LookupOrder()
    {
        _orderFound = true;
    }

    private async Task ConfirmAction()
    {
        await JS.InvokeVoidAsync("history.back");
    }

    private record OrderItem(string Name, decimal Price, int Qty);
}
