@*
    EN: Cancel Order Confirmation — Order summary, reason dropdown, notes, refund warning, cancel/keep buttons.
    VI: Xác nhận hủy đơn — Tổng quan đơn, lý do hủy, ghi chú, cảnh báo hoàn tiền, nút hủy/giữ đơn.
*@
@page "/pos/{ShopId:guid}/dialog/order-cancel"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<div class="pos-dialog-overlay">
    <div style="width:100%;max-width:520px;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="ban" 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 đơn hàng</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Đơn #DH2024-0589</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;">
            @* ═══ ORDER SUMMARY / TÓM TẮ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;">
                    <span style="font-size:14px;font-weight:600;">Đơn #DH2024-0589</span>
                    <span style="font-size:12px;color:var(--pos-text-tertiary);">Bàn 8 · 16:45</span>
                </div>
                @foreach (var item in _orderItems)
                {
                    <div style="display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid var(--pos-border-subtle);">
                        <span style="color:var(--pos-text-secondary);">x@(item.Qty) @item.Name</span>
                        <span style="font-weight:500;">@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</span>
                    <span style="color:var(--pos-orange-primary);">@FormatPrice(_orderItems.Sum(i => i.Price * i.Qty))</span>
                </div>
            </div>

            @* ═══ REFUND WARNING / CẢNH BÁO HOÀN TIỀN ═══ *@
            @if (_isPaid)
            {
                <div style="display:flex;gap:10px;padding:14px;border-radius:var(--pos-radius);
                            background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);margin-bottom:20px;">
                    <i data-lucide="alert-triangle" style="width:20px;height:20px;color:var(--pos-warning);flex-shrink:0;margin-top:2px;"></i>
                    <div>
                        <div style="font-size:13px;font-weight:600;color:var(--pos-warning);">Đơn hàng đã thanh toán</div>
                        <div style="font-size:12px;color:var(--pos-text-secondary);margin-top:4px;">
                            Hủy đơn này sẽ phát sinh hoàn tiền @FormatPrice(_orderItems.Sum(i => i.Price * i.Qty)) cho khách hàng.
                            Vui lòng xác nhận với quản lý trước khi tiếp tục.
                        </div>
                    </div>
                </div>
            }

            @* ═══ CANCELLATION REASON / LÝ DO HỦY ═══ *@
            <div style="margin-bottom:20px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">
                    Lý do hủy <span style="color:var(--pos-danger);">*</span>
                </div>
                <select @bind="_selectedReason"
                        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 lý do —</option>
                    @foreach (var reason in _reasons)
                    {
                        <option value="@reason">@reason</option>
                    }
                </select>
            </div>

            @* ═══ NOTES / GHI CHÚ ═══ *@
            <div style="margin-bottom:16px;">
                <div style="font-size:14px;font-weight:600;margin-bottom:10px;">Ghi chú thêm</div>
                <textarea @bind="_note" rows="3" placeholder="Nhập chi tiết lý do hủy (nếu cần)..."
                          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>

        @* ═══ 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"))">
                <i data-lucide="arrow-left" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;"></i>
                Giữ đơn hàng
            </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;
                           opacity:@(string.IsNullOrEmpty(_selectedReason) ? "0.5" : "1");
                           pointer-events:@(string.IsNullOrEmpty(_selectedReason) ? "none" : "auto");"
                    @onclick="CancelOrder">
                <i data-lucide="trash-2" style="width:16px;height:16px;vertical-align:middle;margin-right:4px;"></i>
                Hủy đơn hàng
            </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: Cancel state / VI: Trạng thái hủy
    private string _selectedReason = "";
    private string _note = "";
    private bool _isPaid = true;

    // EN: Cancellation reasons / VI: Lý do hủy
    private readonly string[] _reasons =
    {
        "Khách hủy", "Hết nguyên liệu", "Sai đơn", "Quá lâu", "Khác"
    };

    // EN: Demo order items / VI: Danh sách món mẫu
    private readonly List<CancelItem> _orderItems = new()
    {
        new("Cơm tấm sườn bì chả", 65_000, 2),
        new("Canh chua cá lóc", 85_000, 1),
        new("Chả giò", 40_000, 1),
        new("Nước mía", 20_000, 3),
    };

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

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