@*
    EN: Bank Transfer — Bank account info, reference code, transfer verification.
    VI: Chuyển khoản ngân hàng — Thông tin tài khoản, mã tham chiếu, xác minh chuyển khoản.
*@
@page "/pos/{ShopId:guid}/payment/bank-transfer"
@page "/pos/{ShopId:guid}/payment/bank-transfer/{OrderId:guid}"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject PosDataService DataService

@if (_isLoading)
{
    <div style="display:flex;align-items:center;justify-content:center;height:100%;">
        <div style="text-align:center;">
            <div style="width:48px;height:48px;border:4px solid var(--pos-border-subtle);border-top-color:var(--pos-orange-primary);
                        border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px;"></div>
            <div style="color:var(--pos-text-tertiary);font-size:14px;">Đang tải...</div>
        </div>
    </div>
}
else if (!string.IsNullOrEmpty(_errorMessage))
{
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;">
        <div style="color:var(--pos-danger);font-size:16px;font-weight:600;">@_errorMessage</div>
        <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>
}
else
{
    <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>

        @* ═══ BANK ACCOUNT INFO ═══ *@
        <div style="width:100%;max-width:420px;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;margin-bottom:4px;">Thông tin chuyển khoản</div>

            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--pos-bg-interactive);border-radius:8px;">
                <span style="font-size:13px;color:var(--pos-text-tertiary);">Ngân hàng</span>
                <span style="font-size:14px;font-weight:600;">@_bankName</span>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--pos-bg-interactive);border-radius:8px;">
                <span style="font-size:13px;color:var(--pos-text-tertiary);">Số tài khoản</span>
                <span style="font-size:14px;font-weight:600;letter-spacing:1px;">@_accountNumber</span>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--pos-bg-interactive);border-radius:8px;">
                <span style="font-size:13px;color:var(--pos-text-tertiary);">Chủ tài khoản</span>
                <span style="font-size:14px;font-weight:600;">@_accountHolder</span>
            </div>

            @* EN: Transfer reference / VI: Mã tham chiếu *@
            <div style="padding:16px;background:rgba(255,92,0,0.08);border:1px dashed var(--pos-orange-primary);border-radius:8px;text-align:center;">
                <div style="font-size:12px;color:var(--pos-text-tertiary);margin-bottom:6px;">Nội dung chuyển khoản</div>
                <div style="font-size:18px;font-weight:700;color:var(--pos-orange-primary);letter-spacing:2px;">@_referenceCode</div>
            </div>
        </div>

        @* ═══ STATUS ═══ *@
        @if (_isProcessing)
        {
            <div style="display:flex;align-items:center;gap:8px;color:var(--pos-text-tertiary);font-size:14px;">
                <div style="width:8px;height:8px;border-radius:50%;background:var(--pos-orange-primary);animation:pulse 2s ease-in-out infinite;"></div>
                Đang xử lý thanh toán...
            </div>
        }
        else
        {
            <div style="display:flex;align-items:center;gap:8px;color:var(--pos-warning);font-size:14px;">
                <div style="width:8px;height:8px;border-radius:50%;background:var(--pos-warning);animation:pulse 2s ease-in-out infinite;"></div>
                Chờ xác nhận chuyển khoản...
            </div>
        }

        @* ═══ ACTIONS ═══ *@
        <div style="display:flex;gap:12px;">
            <button style="display:flex;align-items:center;gap:6px;padding:12px 24px;border-radius:var(--pos-radius);border:none;
                           background:var(--pos-success);color:#fff;cursor:pointer;font-size:14px;font-weight:600;"
                    disabled="@_isProcessing"
                    @onclick="Verify">
                <i data-lucide="check-circle" style="width:16px;height:16px;"></i>
                @(_isProcessing ? "Đang xử lý..." : "Xác nhận đã nhậ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;"
                    disabled="@_isProcessing"
                    @onclick="Cancel">
                Hủy
            </button>
        </div>
    </div>
}

<style>
    @@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    @@keyframes spin { to { transform: rotate(360deg); } }
</style>

@code {
    // EN: OrderId from route parameter or query string.
    // VI: OrderId từ route parameter hoặc query string.
    [Parameter] public Guid? OrderId { get; set; }
    [SupplyParameterFromQuery(Name = "orderId")] public Guid? OrderIdQuery { get; set; }

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

    private decimal _orderTotal;
    private bool _isLoading = true;
    private bool _isProcessing;
    private string? _errorMessage;

    // EN: Bank info — can be loaded from shop settings in future.
    // VI: Thông tin ngân hàng — có thể tải từ cài đặt shop trong tương lai.
    private string _bankName = "Vietcombank";
    private string _accountNumber = "1017 6688 9900";
    private string _accountHolder = "CONG TY TNHH GOODGO";
    private string _referenceCode = "";

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

    private async Task LoadOrderAsync()
    {
        _isLoading = true;
        try
        {
            if (_resolvedOrderId == Guid.Empty) { _errorMessage = "Không tìm thấy mã đơn hàng."; return; }
            var detail = await DataService.GetOrderDetailAsync(_resolvedOrderId, ShopId);
            if (detail?.Order == null) { _errorMessage = "Không thể tải thông tin đơn hàng."; return; }
            _orderTotal = detail.Order.TotalAmount;
            // EN: Generate reference code from order ID for transfer identification.
            // VI: Tạo mã tham chiếu từ order ID để xác định chuyển khoản.
            _referenceCode = $"GG{_resolvedOrderId.ToString("N")[..8].ToUpper()}";
        }
        catch { _errorMessage = "Lỗi khi tải đơn hàng. Vui lòng thử lại."; }
        finally { _isLoading = false; }
    }

    private async Task Verify()
    {
        _isProcessing = true;
        StateHasChanged();
        try
        {
            var success = await DataService.PayOrderAsync(_resolvedOrderId, ShopId, "transfer");
            if (success)
            {
                NavigationManager.NavigateTo($"/pos/{ShopId}/payment/success?orderId={_resolvedOrderId}&method=transfer");
            }
            else
            {
                _errorMessage = "Thanh toán thất bại. Vui lòng thử lại.";
            }
        }
        catch
        {
            _errorMessage = "Lỗi kết nối. Vui lòng thử lại.";
        }
        finally
        {
            _isProcessing = false;
        }
    }

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