{% extends "templates/web.html" %}

{% block page_content %}
<div class="crypto-checkout-container" style="max-width: 520px; margin: 40px auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">

{% if error %}
  <!-- Error State -->
  <div style="text-align: center; padding: 40px 20px;">
    <div style="font-size: 48px; margin-bottom: 16px;">&#9888;</div>
    <h2 style="color: #dc3545; margin-bottom: 12px;">Payment Error</h2>
    <p style="color: #666; margin-bottom: 24px;">{{ error_message }}</p>
    <a href="/" class="btn btn-primary">Return Home</a>
  </div>

{% else %}
  <!-- Payment Pending State -->
  <div id="payment-pending">
    <div style="text-align: center; margin-bottom: 24px;">
      <h2 style="margin-bottom: 4px;">Pay with {{ crypto_name }}</h2>
      <p style="color: #888; margin: 0;">Invoice for ${{ amount_usd }} USD</p>
    </div>

    <!-- Amount in Crypto -->
    <div style="background: #f8f9fa; border-radius: 8px; padding: 20px; text-align: center; margin-bottom: 20px;">
      <div style="font-size: 14px; color: #666; margin-bottom: 4px;">Send exactly</div>
      <div style="font-size: 28px; font-weight: 700; color: #1a1a2e; letter-spacing: 0.5px;">
        {{ amount_crypto }} {{ crypto_symbol }}
      </div>
      <div style="font-size: 13px; color: #888; margin-top: 4px;">
        1 {{ crypto_symbol }} = ${{ exchange_rate }} USD
      </div>
    </div>

    <!-- QR Code -->
    <div style="text-align: center; margin-bottom: 20px;">
      <div id="qrcode" style="display: inline-block; padding: 16px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;"></div>
    </div>

    <!-- Wallet Address -->
    <div style="margin-bottom: 20px;">
      <label style="display: block; font-size: 13px; color: #666; margin-bottom: 6px;">{{ crypto_name }} Address</label>
      <div style="display: flex; gap: 8px;">
        <input type="text" id="wallet-address" value="{{ wallet_address }}" readonly
          style="flex: 1; padding: 10px 12px; border: 1px solid #d0d0d0; border-radius: 6px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: #fafafa; color: #333;">
        <button id="copy-btn" onclick="copyAddress()" type="button"
          style="padding: 10px 16px; border: 1px solid #d0d0d0; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; white-space: nowrap; transition: all 0.2s;">
          Copy
        </button>
      </div>
    </div>

    <!-- Status -->
    <div id="status-area" style="text-align: center; padding: 16px; background: #fff8e1; border-radius: 8px; margin-bottom: 20px;">
      <div style="display: inline-flex; align-items: center; gap: 8px;">
        <div class="spinner" style="width: 18px; height: 18px; border: 2px solid #f0c040; border-top-color: #e6a800; border-radius: 50%; animation: spin 1s linear infinite;"></div>
        <span style="color: #8a6d00; font-size: 14px;" id="status-text">Waiting for payment confirmation...</span>
      </div>
    </div>

    <!-- Info -->
    <div style="font-size: 12px; color: #999; text-align: center; line-height: 1.6;">
      <p>Send the exact amount shown above to the address provided.</p>
      <p>This page will automatically update when your payment is confirmed.</p>
      <p style="margin-top: 8px;">Payment Request: <code style="background: #f0f0f0; padding: 2px 6px; border-radius: 3px;">{{ payment_request_name }}</code></p>
    </div>
  </div>

  <!-- Payment Success State (hidden initially) -->
  <div id="payment-success" style="display: none; text-align: center; padding: 40px 20px;">
    <div style="width: 64px; height: 64px; background: #28a745; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </div>
    <h2 style="color: #28a745; margin-bottom: 8px;">Payment Confirmed!</h2>
    <p style="color: #666; margin-bottom: 24px;">
      Your payment of {{ amount_crypto }} {{ crypto_symbol }} (${{ amount_usd }} USD) has been received.
    </p>
    <a href="{{ redirect_to }}" class="btn btn-primary" style="padding: 10px 32px; font-size: 15px;">Continue</a>
  </div>
{% endif %}

</div>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
.crypto-checkout-container .btn-primary {
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.crypto-checkout-container .btn-primary:hover {
  background: #2d2d4e;
  color: #fff;
  text-decoration: none;
}
</style>

{% if not error %}
<script>
// QR Code generation using a lightweight inline generator
// Generates QR code as an HTML table (no external dependencies)
(function() {
  // Use the Google Charts API for QR code (simple, reliable, no JS dependency)
  var qrData = {{ frappe.utils.jinja_globals.frappe.as_json(qr_data) }};
  var qrContainer = document.getElementById('qrcode');
  if (qrContainer && qrData) {
    var img = document.createElement('img');
    img.src = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(qrData);
    img.alt = 'QR Code';
    img.width = 200;
    img.height = 200;
    img.style.display = 'block';
    qrContainer.appendChild(img);
  }
})();

// Copy address to clipboard
function copyAddress() {
  var input = document.getElementById('wallet-address');
  var btn = document.getElementById('copy-btn');
  if (navigator.clipboard) {
    navigator.clipboard.writeText(input.value).then(function() {
      btn.textContent = 'Copied!';
      btn.style.background = '#e8f5e9';
      btn.style.borderColor = '#4caf50';
      btn.style.color = '#2e7d32';
      setTimeout(function() {
        btn.textContent = 'Copy';
        btn.style.background = '#fff';
        btn.style.borderColor = '#d0d0d0';
        btn.style.color = '';
      }, 2000);
    });
  } else {
    input.select();
    document.execCommand('copy');
    btn.textContent = 'Copied!';
    setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
  }
}

// Poll for payment status every 5 seconds
(function() {
  var pollUrl = {{ frappe.utils.jinja_globals.frappe.as_json(poll_url) }};
  var redirectTo = {{ frappe.utils.jinja_globals.frappe.as_json(redirect_to) }};
  var pollInterval = null;
  var pollCount = 0;
  var maxPolls = 720; // 720 * 5s = 1 hour max polling

  function checkStatus() {
    pollCount++;
    if (pollCount > maxPolls) {
      clearInterval(pollInterval);
      document.getElementById('status-text').textContent = 'Payment session timed out. Please refresh the page.';
      return;
    }

    fetch(pollUrl, {
      method: 'GET',
      headers: { 'Accept': 'application/json' }
    })
    .then(function(resp) { return resp.json(); })
    .then(function(data) {
      var result = data.message || data;
      if (result.paid) {
        clearInterval(pollInterval);
        document.getElementById('payment-pending').style.display = 'none';
        document.getElementById('payment-success').style.display = 'block';
        // Auto-redirect after 5 seconds
        setTimeout(function() {
          window.location.href = redirectTo;
        }, 5000);
      }
    })
    .catch(function(err) {
      console.warn('Payment status poll error:', err);
    });
  }

  pollInterval = setInterval(checkStatus, 5000);
  // Also check immediately after a short delay
  setTimeout(checkStatus, 2000);
})();
</script>
{% endif %}
{% endblock %}