Apple Pay (iOS Only)

import { useState, useCallback } from 'react';
import { View, Text, TextInput, Button, Platform } from 'react-native';
import { ApplePayProvider, ApplePayButton, useApplePay } from '@coinbase/cdp-react-native';
import { useEvmAddress } from '@coinbase/cdp-hooks';

export default function ApplePayScreen() {
  return (
    <ApplePayProvider>
      <ApplePayFlow />
    </ApplePayProvider>
  );
}

function ApplePayFlow() {
  const { status, data, error, createOrder, reset } = useApplePay();
  const { evmAddress } = useEvmAddress();
  const [amount, setAmount] = useState('');

  const handleCreateOrder = useCallback(async () => {
    const parsedAmount = parseFloat(amount);
    if (parsedAmount < 1 || parsedAmount > 10000 || !evmAddress) {
      return;
    }

    await createOrder({
      destination: { address: evmAddress, network: 'base' },
      purchase: { amount, currency: 'usdc' },
      payment: { currency: 'usd' },
      isSandbox: true,
    });
  }, [amount, evmAddress, createOrder]);

  const handleDone = useCallback(() => {
    reset();
    setAmount('');
  }, [reset]);

  // Platform check - Apple Pay is iOS only
  if (Platform.OS !== 'ios') {
    return (
      <View>
        <Text>Apple Pay is only available on iOS devices.</Text>
      </View>
    );
  }

  // Handle errors including verification requirements
  if (status === 'error') {
    if (error?.code === 'requires_email') {
      return <EmailVerificationView />;
    }
    if (error?.code === 'requires_sms') {
      return <SmsVerificationView />;
    }
    return (
      <View>
        <Text>Error: {error?.message || 'An error occurred'}</Text>
        <Button title="Try Again" onPress={reset} />
      </View>
    );
  }

  // Show success state
  if (status === 'success') {
    return (
      <View>
        <Text>Purchase complete!</Text>
        <Button title="Done" onPress={handleDone} />
      </View>
    );
  }

  // Show Apple Pay button when order is ready
  if (status === 'pending' && data) {
    return (
      <View>
        <Text>Complete your purchase</Text>
        <ApplePayButton />
        <Button title="Cancel" onPress={reset} />
      </View>
    );
  }

  // Show order form
  return (
    <View>
      <TextInput
        value={amount}
        onChangeText={setAmount}
        placeholder="Amount in USD"
        keyboardType="decimal-pad"
      />
      <Button
        title={status === 'pending' ? 'Creating order...' : 'Buy USDC with Apple Pay'}
        onPress={handleCreateOrder}
        disabled={status === 'pending' || !amount}
      />
    </View>
  );
}