@*
    EN: Gift Card Payment — Gift card code input, balance lookup, apply payment.
    VI: Thanh toán thẻ quà tặng — Nhập mã thẻ, tra cứu số dư, áp dụng thanh toán.
*@
@page "/pos/{ShopId:guid}/payment/gift-card"
@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:24px;">
    @* ═══ ORDER TOTAL ═══ *@
    <div style="text-align:center;">
        <div style="font-size:14px;color:var(--pos-text-tertiary);margin-bottom:4px;">Tổng thanh toán</div>
        <div style="font-size:32px;font-weight:700;color:var(--pos-orange-primary);">@FormatPrice(_orderTotal)</div>
    </div>

    @* ═══ GIFT CARD INPUT ═══ *@
    <div style="width:100%;max-width:440px;background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:24px;display:flex;flex-direction:column;gap:16px;">
        <div style="font-size:16px;font-weight:600;text-align:center;">
            <i data-lucide="gift" style="width:20px;height:20px;color:var(--pos-orange-primary);vertical-align:middle;"></i>
            Thẻ quà tặng
        </div>

        <div style="display:flex;gap:8px;">
            <input type="text" @bind="_cardCode" placeholder="Nhập mã thẻ quà tặng..."
                   style="flex:1;padding:14px 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:16px;letter-spacing:2px;outline:none;" />
            <button style="padding:14px 20px;border-radius:var(--pos-radius);border:none;background:var(--pos-orange-primary);
                           color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                    @onclick="LookupCard">
                Tra cứu
            </button>
        </div>

        @if (_cardLookedUp)
        {
            @* ═══ CARD BALANCE ═══ *@
            <div style="padding:16px;background:var(--pos-bg-interactive);border-radius:8px;display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;justify-content:space-between;">
                    <span style="font-size:13px;color:var(--pos-text-tertiary);">Số dư thẻ</span>
                    <span style="font-size:16px;font-weight:600;color:var(--pos-success);">@FormatPrice(_cardBalance)</span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="font-size:13px;color:var(--pos-text-tertiary);">Số tiền áp dụng</span>
                    <span style="font-size:16px;font-weight:600;color:var(--pos-orange-primary);">@FormatPrice(_appliedAmount)</span>
                </div>

                @if (_remainingAmount > 0)
                {
                    @* EN: Remaining balance warning / VI: Cảnh báo số dư còn thiếu *@
                    <div style="padding:12px;background:rgba(239,68,68,0.1);border-radius:8px;border:1px solid var(--pos-danger);">
                        <div style="font-size:13px;color:var(--pos-danger);font-weight:600;">
                            <i data-lucide="alert-triangle" style="width:14px;height:14px;vertical-align:middle;"></i>
                            Còn thiếu: @FormatPrice(_remainingAmount)
                        </div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:4px;">
                            Vui lòng thanh toán phần còn lại bằng phương thức khác
                        </div>
                    </div>
                }
            </div>
        }
    </div>

    @* ═══ ACTIONS ═══ *@
    <div style="display:flex;gap:12px;">
        @if (_cardLookedUp)
        {
            @if (_remainingAmount > 0)
            {
                <button style="padding:12px 24px;border-radius:var(--pos-radius);border:none;background:var(--pos-orange-primary);
                               color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                        @onclick="GoToPartial">
                    Thanh toán kết hợp
                </button>
            }
            else
            {
                <button class="pos-btn-checkout" @onclick="Confirm">
                    Xác nhận thanh toán
                </button>
            }
        }
        <button style="padding:12px 24px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                       background:transparent;color:var(--pos-text-secondary);cursor:pointer;font-size:14px;"
                @onclick="Cancel">
            Quay lại
        </button>
    </div>
</div>

@code {
    // EN: OrderId from route parameter or query string — passed from MethodSelect.
    // VI: OrderId từ route parameter hoặc query string — được truyền từ MethodSelect.
    [Parameter] public Guid? OrderId { get; set; }
    [SupplyParameterFromQuery(Name = "orderId")] public Guid? OrderIdQuery { 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 _cardCode = "";
    private bool _cardLookedUp = false;
    private decimal _cardBalance = 0;
    private decimal _appliedAmount => Math.Min(_cardBalance, _orderTotal);
    private decimal _remainingAmount => Math.Max(0, _orderTotal - _cardBalance);

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        if (_resolvedOrderId != Guid.Empty)
        {
            try
            {
                var detail = await DataService.GetOrderDetailAsync(_resolvedOrderId, ShopId);
                if (detail?.Order != null)
                    _orderTotal = detail.Order.TotalAmount;
            }
            catch { /* EN: Non-critical — gift card lookup still usable / VI: Không quan trọng */ }
        }
    }

    private void LookupCard()
    {
        // EN: Card balance lookup — TODO: integrate with Wallet/Promotion Service API.
        // VI: Tra cứu số dư thẻ — TODO: tích hợp với Wallet/Promotion Service API.
        _cardLookedUp = true;
        _cardBalance = 200_000; // EN: Placeholder until gift card API is available / VI: Tạm thời cho đến khi có API thẻ quà tặng
    }

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