// Subscribe
widget.on('eventName', (data) => {
  console.log('Event data:', data);
});

// Unsubscribe
widget.off('eventName', handler);

// Subscribe once
widget.once('eventName', (data) => {
  console.log('This only fires once');
});

widget.on('ready', () => {
  console.log('Widget is ready');
  hideLoadingSpinner();
});

widget.on('close', () => {
  console.log('Widget closed');
  hideModal();
});

widget.on('error', (error) => {
  console.error('Widget error:', error);
  // error: { code: string, message: string, details?: any }
});

widget.on('stepChanged', (payload) => {
  const { from, to, providerData } = payload;
  console.log(`Navigated from ${from} to ${to}`);
  analytics.track('Widget Step', { step: to });

  // Provider data is included when transitioning to/from payment steps
  if (providerData) {
    console.log('Provider data:', providerData);
  }
});

interface StepChangePayload {
  from: string;           // Previous step name
  to: string;             // Current step name
  providerData?: {        // Optional provider-specific data
    status?: string;      // Provider status (e.g., 'loading', 'ready', 'processing')
    progress?: number;    // Progress percentage (0-100)
    metadata?: Record<string, unknown>;  // Additional provider metadata
  };
}

widget.on('back', ({ from, to }) => {
  console.log(`Went back from ${from} to ${to}`);
});

widget.on('quoteRequested', ({ amount, sourceCurrency, targetCurrency }) => {
  console.log(`Requesting quote: ${amount} ${sourceCurrency} → ${targetCurrency}`);
});

widget.on('quoteGenerated', (quote) => {
  console.log('Quote generated:', quote);
  // quote: {
  //   id: string,
  //   sourceAmount: string,
  //   sourceCurrency: string,
  //   targetAmount: string,
  //   targetCurrency: string,
  //   exchangeRate: string,
  //   fees: { platform: string, network: string, total: string },
  //   expiresAt: string
  // }
});

widget.on('quoteExpired', (quote) => {
  console.log('Quote expired:', quote.id);
  // Widget will auto-refresh the quote
});

widget.on('kycRequired', () => {
  console.log('KYC verification required');
  analytics.track('KYC Required');
});

widget.on('kycStarted', ({ kycCaseId, verificationUrl }) => {
  console.log('KYC started:', kycCaseId);
});

widget.on('kycCompleted', ({ status, kycCaseId }) => {
  console.log('KYC completed:', status);
  // status: 'approved' | 'rejected' | 'pending'
});

widget.on('walletSelected', (wallet) => {
  console.log('Wallet selected:', wallet);
  // wallet: { id: string, address: string, currency: string }
});

widget.on('walletAdded', (wallet) => {
  console.log('New wallet added:', wallet.address);
});

widget.on('walletScreened', ({ wallet, status }) => {
  console.log(`Wallet ${wallet.address} screening: ${status}`);
  // status: 'clear' | 'flagged' | 'blocked'
});

widget.on('orderCreated', (order) => {
  console.log('Order created:', order.id);
  analytics.track('Order Created', {
    orderId: order.id,
    amount: order.sourceAmount,
  });
});

widget.on('orderProcessing', (order) => {
  console.log('Processing order:', order.id);
});

widget.on('orderComplete', (order) => {
  console.log('Order completed:', order);
  // order: {
  //   id: string,
  //   status: 'completed',
  //   sourceAmount: string,
  //   sourceCurrency: string,
  //   targetAmount: string,
  //   targetCurrency: string,
  //   walletAddress: string,
  //   txHash?: string
  // }

  // Track conversion
  analytics.track('Purchase Complete', {
    orderId: order.id,
    revenue: parseFloat(order.sourceAmount),
    currency: order.sourceCurrency,
  });
});

widget.on('orderFailed', ({ order, error }) => {
  console.error('Order failed:', error);
  analytics.track('Order Failed', {
    orderId: order.id,
    error: error.code,
  });
});

widget.on('paymentInitiated', ({ orderId, paymentMethod }) => {
  console.log('Payment initiated:', paymentMethod);
});

widget.on('paymentComplete', ({ orderId }) => {
  console.log('Payment confirmed for order:', orderId);
});

widget.on('paymentFailed', ({ orderId, error }) => {
  console.error('Payment failed:', error);
});

widget.on('stepChanged', ({ from, to, providerData }) => {
  if (to === 'payment' && providerData) {
    switch (providerData.status) {
      case 'loading':
        console.log('Payment provider is loading...');
        break;
      case 'ready':
        console.log('Payment provider is ready for input');
        break;
      case 'processing':
        console.log(`Processing payment: ${providerData.progress}%`);
        break;
      case 'awaiting_confirmation':
        console.log('Awaiting payment confirmation');
        break;
    }
  }
});

widget.on('stepChanged', ({ providerData }) => {
  if (providerData?.progress !== undefined) {
    updateProgressBar(providerData.progress);

    if (providerData.progress === 100) {
      showMessage('Payment processing complete');
    }
  }
});

widget.on('stepChanged', ({ providerData }) => {
  if (providerData?.metadata) {
    // Log metadata for debugging (avoid exposing to end users)
    console.log('Provider metadata:', providerData.metadata);

    // Example: Check for specific provider capabilities
    if (providerData.metadata.supports3DS) {
      console.log('3D Secure authentication may be required');
    }
  }
});

widget.on('error', (error) => {
  if (error.code === 'PROVIDER_ERROR') {
    // Provider-specific error handling
    console.error('Provider error:', error.message);

    // Show user-friendly message
    showError('There was an issue with the payment provider. Please try again.');

    // Optionally track for monitoring
    analytics.track('Provider Error', {
      message: error.message,
      details: error.details,
    });
  }
});

import { RampWidget } from '@nowramp/sdk';

const widget = new RampWidget({
  apiKey: 'your_api_key',
  projectId: 'your_project_id',
  externalUserId: 'user_123',
  containerId: 'widget-container',
  environment: 'production', // or 'sandbox'
  // Widget URL: https://widget.nowramp.com
});

// Lifecycle
widget.on('ready', () => hideLoader());
widget.on('close', () => hideModal());
widget.on('error', (e) => showError(e.message));

// Analytics
widget.on('stepChanged', ({ to, providerData }) => {
  analytics.page(to);

  // Track provider status changes
  if (providerData?.status) {
    analytics.track('Provider Status', {
      step: to,
      status: providerData.status,
    });
  }
});
widget.on('quoteGenerated', (q) => analytics.track('Quote', q));
widget.on('kycStarted', () => analytics.track('KYC Started'));
widget.on('orderCreated', (o) => analytics.track('Order Created', o));

// Provider progress
widget.on('stepChanged', ({ providerData }) => {
  if (providerData?.progress !== undefined) {
    updateProgressIndicator(providerData.progress);
  }
});

// Conversions
widget.on('orderComplete', (order) => {
  analytics.track('Purchase', {
    value: order.sourceAmount,
    currency: order.sourceCurrency,
  });
  showSuccess('Your crypto is on the way!');
});

widget.on('orderFailed', ({ error }) => {
  showError('Order failed. Please try again.');
});

widget.mount();