import { Saga } from '@saga-pay/sdk';
import { ethers } from 'ethers';
import { useState } from 'react';

function PaymentButton() {
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState('');

  const handlePayment = async () => {
    try {
      setLoading(true);
      setStatus('Connecting wallet...');

      // Get wallet provider (MetaMask, Coinbase Wallet, etc.)
      const provider = new ethers.BrowserProvider(window.ethereum);
      
      // Initialize Saga SDK
      const saga = new Saga({
        environment: 'sandbox', // or 'production'
        walletProvider: provider
      });

      setStatus('Processing payment...');

      // Single payment call - handles everything
      const result = await saga.pay({
        merchantAddress: '0x742d35Cc6634C0532925a3b8D4C9db96C4b4d8b6',
        amount: '10.00',
        callbackUrl: 'https://myapp.com/webhook', // Your backend webhook
        metadata: {
          orderId: 'order-123',
          customerEmail: 'customer@example.com'
        }
      });

      setStatus(`Payment initiated: ${result.paymentId}`);
      
      // Optional: Poll for status updates
      const pollStatus = async () => {
        const status = await saga.getPaymentStatus(result.paymentId);
        setStatus(`Status: ${status.status}`);
      };

    } catch (error) {
      setStatus(`Error: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 border rounded-lg">
      <button 
        onClick={handlePayment}
        disabled={loading}
        className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'Processing...' : 'Pay $10.00 USDC'}
      </button>
      {status && <p className="mt-4 text-gray-600">{status}</p>}
    </div>
  );
}

// Express.js webhook handler
app.post('/webhook', async (req, res) => {
  const { paymentId, status, amount, metadata } = req.body;
  
  console.log(`Payment ${paymentId}: ${status}`);
  
  if (status === 'COMPLETED') {
    // 🔒 SECURITY: Always validate with GET request
    const actualPayment = await fetch(`https://api.saga.onl/v1/pay/${paymentId}`);
    const actualStatus = actualPayment.status;
    
    if (actualStatus === 'COMPLETED') {
      // Handle successful payment
      await updateOrderStatus(metadata.orderId, 'paid');
      await sendConfirmationEmail(metadata.customerEmail);
      await fulfillOrder(metadata.orderId);
    }
  }
  
  res.status(200).json({ received: true });
});

// Environment configuration
const saga = new Saga({
  environment: 'sandbox', // 'sandbox' or 'production'
  walletProvider: provider
});

// For production
const saga = new Saga({
  environment: 'production',
  walletProvider: provider
});