// ✅ Modern hybrid payment approach
async function initializePayments() {
  // 1. Initialize Pi SDK
  Pi.init({ version: "2.0", sandbox: false });
  
  // 2. Detect environment
  const isPiBrowser = await detectPiBrowser();
  
  if (!isPiBrowser) {
    // 3a. Show fallback UI for regular browsers
    showPaymentFallback();
    return;
  }
  
  // 3b. Enable payment features for Pi Browser
  enablePaymentFeatures();
}

function showPaymentFallback() {
  document.getElementById('payment-section').innerHTML = `
    <div class="payment-fallback">
      <h3>💰 Pi Payments Available in Pi Browser</h3>
      
      <div class="fallback-content">
        <div class="qr-section">
          <img src="/qr-code.png" alt="Scan with Pi Browser" />
          <p>Scan this QR code with Pi Browser to make payments</p>
        </div>
        
        <div class="cta-section">
          <a href="https://pinet.com/YOUR_APP" class="pi-button">
            Open in Pi Browser for Payments
          </a>
        </div>
        
        <div class="info-section">
          <h4>What you'll get in Pi Browser:</h4>
          <ul>
            <li>✅ Secure Pi cryptocurrency payments</li>
            <li>✅ Instant transaction processing</li>
            <li>✅ Built-in fraud protection</li>
          </ul>
        </div>
      </div>
    </div>
  `;
}

function enablePaymentFeatures() {
  // Show payment UI elements
  document.getElementById('payment-buttons').style.display = 'block';
  
  // Set up payment handlers
  document.getElementById('pay-button').onclick = handlePayment;
}

async function handlePayment() {
  try {
    // This function only gets called in Pi Browser
    const payment = await Pi.createPayment({
      amount: 1.0,
      memo: "Premium features upgrade",
      metadata: { 
        itemId: "premium_upgrade",
        userId: "user123",
        timestamp: Date.now()
      },
    }, {
      onReadyForServerApproval: function(paymentId) {
        console.log('Payment created, sending for approval:', paymentId);
        // Send to your server for approval
        approvePaymentOnServer(paymentId);
      },
      onReadyForServerCompletion: function(paymentId, txid) {
        console.log('Payment ready for completion:', paymentId, txid);
        // Send to your server for completion
        completePaymentOnServer(paymentId, txid);
      },
      onCancel: function(paymentId) {
        console.log('Payment cancelled by user:', paymentId);
        // Handle cancellation in your UI
        handlePaymentCancellation(paymentId);
      },
      onError: function(error, payment) {
        console.error('Payment error:', error);
        // Handle payment errors gracefully
        handlePaymentError(error, payment);
      }
    });
  } catch (error) {
    console.error('❌ Payment creation failed:', error);
  }
}