@extends('layouts.app')
@section('title', 'Payment Status')

@push('head')
<style>
.status-page {
  max-width: 520px; margin: 60px auto; padding: 0 24px; text-align: center;
}

.status-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 48px 36px;
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
}

.status-icon {
  font-size: 72px; margin-bottom: 20px; display: block;
  animation: iconPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes iconPop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }

.status-title {
  font-family: var(--font-d); font-size: 28px; font-weight: 700;
  margin-bottom: 10px;
}
.status-msg {
  color: var(--ink2); font-size: 15px; line-height: 1.7; margin-bottom: 28px;
}

/* Pending spinner */
.spinner {
  width: 48px; height: 48px;
  border: 4px solid #f5c97a;
  border-top-color: #b87b1a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform:rotate(360deg); } }

.pulse-ring {
  display: inline-block;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,204,0,.15);
  position: relative; margin-bottom: 24px;
}
.pulse-ring::after {
  content:''; position:absolute; inset:-12px;
  border:3px solid rgba(255,204,0,.4);
  border-radius:50%;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { 0%{transform:scale(.8);opacity:1} 100%{transform:scale(1.4);opacity:0} }
.pulse-inner {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:36px;
}

.detail-row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--ink2); }
.detail-value { font-weight: 600; }

.btn-home {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; background: var(--accent); color: #fff;
  border-radius: 10px; font-family: var(--font-d); font-size: 16px;
  font-weight: 600; text-decoration: none; transition: all .2s;
  margin-top: 20px;
}
.btn-home:hover { background: var(--accent2); transform: translateY(-1px); }

.countdown {
  font-size: 13px; color: var(--ink2); margin-top: 16px;
}
</style>
@endpush

@section('content')
<div class="status-page">
  <div class="status-card" id="statusCard">

    {{-- ── PENDING STATE ── --}}
    @if($payment->status === 'PENDING')
      <div class="pulse-ring"><div class="pulse-inner">📱</div></div>
      <div class="status-title">Waiting for Approval</div>
      <div class="status-msg">
        A push notification has been sent to <strong>{{ $payment->customer_phone }}</strong>.<br>
        Please open your MoMo app and approve the payment of
        <strong>${{ number_format($payment->amount,2) }} {{ $payment->currency }}</strong>.
      </div>

      <div style="background:#faf8f4;border-radius:12px;padding:16px 20px;margin-bottom:24px;text-align:left">
        <div class="detail-row">
          <span class="detail-label">Amount</span>
          <span class="detail-value">${{ number_format($payment->amount,2) }} {{ $payment->currency }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">Reference</span>
          <span class="detail-value" style="font-size:12px;word-break:break-all">{{ $payment->momo_reference_id }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">Order</span>
          <span class="detail-value">{{ $payment->order->reference ?? '—' }}</span>
        </div>
      </div>

      <div class="spinner"></div>
      <div class="countdown" id="countdown">Checking payment status in <strong id="timer">10</strong>s…</div>

    {{-- ── SUCCESSFUL STATE ── --}}
    @elseif($payment->status === 'SUCCESSFUL')
      <span class="status-icon">✅</span>
      <div class="status-title" style="color:var(--green)">Payment Successful!</div>
      <div class="status-msg">
        Your payment has been confirmed. Your order is now being processed.
      </div>

      <div style="background:#edf7f1;border:1px solid rgba(42,122,78,.2);border-radius:12px;padding:16px 20px;margin-bottom:24px;text-align:left">
        <div class="detail-row">
          <span class="detail-label">Amount Paid</span>
          <span class="detail-value" style="color:var(--green)">${{ number_format($payment->amount,2) }} {{ $payment->currency }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">Order Reference</span>
          <span class="detail-value">{{ $payment->order->reference ?? '—' }}</span>
        </div>
        @if($payment->momo_transaction_id)
        <div class="detail-row">
          <span class="detail-label">Transaction ID</span>
          <span class="detail-value" style="font-size:12px">{{ $payment->momo_transaction_id }}</span>
        </div>
        @endif
      </div>

      <a href="{{ route('shop.index') }}" class="btn-home">Continue Shopping →</a>

    {{-- ── FAILED STATE ── --}}
    @else
      <span class="status-icon">❌</span>
      <div class="status-title" style="color:var(--red)">Payment Failed</div>
      <div class="status-msg">
        The payment was not approved or was declined. Your cart has been restored —
        please try again.
      </div>

      <div style="display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap">
        <a href="{{ route('payment.momo.create') }}" class="btn-home" style="background:#b87b1a">
          🔄 Try Again
        </a>
        <a href="{{ route('checkout.index') }}" class="btn-home" style="background:#25D366">
          💬 Pay via WhatsApp
        </a>
      </div>
    @endif

  </div>
</div>
@endsection

@if($payment->status === 'PENDING')
@push('scripts')
<script>
const pollUrl  = "{{ route('payment.momo.poll', $payment->momo_reference_id) }}";
const timerEl  = document.getElementById('timer');
let countdown  = 10;
let pollHandle;

function updateCountdown() {
  if (countdown <= 0) {
    clearInterval(countdownHandle);
    poll();
    return;
  }
  timerEl.textContent = countdown--;
}
const countdownHandle = setInterval(updateCountdown, 1000);

async function poll() {
  try {
    const res  = await fetch(pollUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
    const data = await res.json();

    if (data.status === 'SUCCESSFUL') {
      document.getElementById('statusCard').innerHTML = `
        <span class="status-icon">✅</span>
        <div class="status-title" style="color:var(--green)">Payment Successful!</div>
        <div class="status-msg">Your payment of <strong>${{ number_format($payment->amount,2) }} {{ $payment->currency }}</strong> has been confirmed.<br>Order: <strong>${data.order_ref ?? ''}</strong></div>
        <a href="{{ route('shop.index') }}" class="btn-home">Continue Shopping →</a>`;
      return;
    }

    if (data.status === 'FAILED') {
      document.getElementById('statusCard').innerHTML = `
        <span class="status-icon">❌</span>
        <div class="status-title" style="color:var(--red)">Payment Failed</div>
        <div class="status-msg">The payment was declined. Please try again.</div>
        <div style="display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap">
          <a href="{{ route('payment.momo.create') }}" class="btn-home" style="background:#b87b1a">🔄 Try Again</a>
          <a href="{{ route('checkout.index') }}" class="btn-home" style="background:#25D366">💬 Pay via WhatsApp</a>
        </div>`;
      return;
    }

    // Still PENDING — reset countdown and poll again in 10s
    countdown = 10;
    timerEl.textContent = countdown;
    const countdownHandle2 = setInterval(() => {
      if (countdown <= 0) { clearInterval(countdownHandle2); poll(); return; }
      timerEl.textContent = countdown--;
    }, 1000);

  } catch (e) {
    console.error('Poll error:', e);
    // Retry after 15s on network failure
    setTimeout(poll, 15000);
  }
}
</script>
@endpush
@endif