@*
    EN: Payment Pending — Processing animation, order total, payment method info.
    VI: Đang xử lý thanh toán — Hiệu ứng xử lý, tổng đơn hàng, thông tin phương thức.
*@
@page "/pos/{ShopId:guid}/payment/pending"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject PosDataService DataService

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;gap:28px;">
    @* ═══ PROCESSING ANIMATION ═══ *@
    <div style="position:relative;width:100px;height:100px;">
        <div style="position:absolute;inset:0;border-radius:50%;border:4px solid var(--pos-border-subtle);"></div>
        <div style="position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--pos-orange-primary);
                    animation:spin 1s linear infinite;"></div>
        <div style="position:absolute;inset:12px;border-radius:50%;border:4px solid transparent;border-top-color:var(--pos-warning);
                    animation:spin 1.5s linear infinite reverse;"></div>
        <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;">
            <i data-lucide="loader" style="width:24px;height:24px;color:var(--pos-orange-primary);"></i>
        </div>
    </div>

    @* ═══ STATUS MESSAGE ═══ *@
    <div style="text-align:center;">
        <div style="font-size:20px;font-weight:600;color:var(--pos-text-primary);margin-bottom:8px;">Đang xử lý thanh toán...</div>
        <div style="font-size:14px;color:var(--pos-text-tertiary);">Processing payment...</div>
    </div>

    @* ═══ PAYMENT INFO ═══ *@
    <div style="width:100%;max-width:360px;background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;display:flex;flex-direction:column;gap:12px;">
        <div style="display:flex;justify-content:space-between;font-size:14px;">
            <span style="color:var(--pos-text-tertiary);">Tổng thanh toán</span>
            <span style="font-weight:700;color:var(--pos-orange-primary);font-size:18px;">@FormatPrice(_orderTotal)</span>
        </div>
        <div style="display:flex;justify-content:space-between;font-size:14px;">
            <span style="color:var(--pos-text-tertiary);">Phương thức</span>
            <span style="font-weight:600;">@_paymentMethod</span>
        </div>
        <div style="display:flex;justify-content:space-between;font-size:14px;">
            <span style="color:var(--pos-text-tertiary);">Mã giao dịch</span>
            <span style="font-weight:500;color:var(--pos-text-secondary);">@_transactionId</span>
        </div>
    </div>

    @* ═══ CANCEL BUTTON ═══ *@
    <button style="display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--pos-radius);border:1px solid var(--pos-danger);
                   background:transparent;color:var(--pos-danger);cursor:pointer;font-size:14px;"
            @onclick="Cancel">
        <i data-lucide="x-circle" style="width:16px;height:16px;"></i>
        Hủy giao dịch
    </button>
</div>

<style>
    @@keyframes spin { to { transform: rotate(360deg); } }
</style>

@code {
    // EN: OrderId and payment method from query string — passed from the payment gateway page.
    // VI: OrderId và phương thức thanh toán từ query string — được truyền từ trang payment gateway.
    [Parameter] public Guid? OrderId { get; set; }
    [SupplyParameterFromQuery(Name = "orderId")] public Guid? OrderIdQuery { get; set; }
    [SupplyParameterFromQuery(Name = "method")] public string? MethodQuery { get; set; }
    [SupplyParameterFromQuery(Name = "txnId")] public string? TxnIdQuery { get; set; }

    private Guid _resolvedOrderId => OrderId ?? OrderIdQuery ?? Guid.Empty;

    // EN: Order total loaded from Order Service API (FRONT-W-03).
    // VI: Tổng đơn hàng được tải từ Order Service API (FRONT-W-03).
    private decimal _orderTotal = 0;
    private string _paymentMethod = "Đang xử lý...";
    private string _transactionId = "—";

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        if (!string.IsNullOrEmpty(MethodQuery)) _paymentMethod = MethodQuery;
        if (!string.IsNullOrEmpty(TxnIdQuery)) _transactionId = TxnIdQuery;

        if (_resolvedOrderId != Guid.Empty)
        {
            try
            {
                var detail = await DataService.GetOrderDetailAsync(_resolvedOrderId, ShopId);
                if (detail?.Order != null)
                    _orderTotal = detail.Order.TotalAmount;
            }
            catch { /* EN: Non-critical — pending screen still shows / VI: Không quan trọng */ }
        }
    }

    private void Cancel() => NavigateTo($"payment/method-select?orderId={_resolvedOrderId}");
}
