import { useMobileWallet } from '@wallet-ui/react-native-web3js';

const { account, connection, signAndSendTransaction } = useMobileWallet();

import { useState } from 'react';
import { View, TextInput, Pressable, Text, Alert } from 'react-native';
import { useMobileWallet } from '@wallet-ui/react-native-web3js';
import {
  PublicKey,
  Transaction,
  SystemProgram,
  LAMPORTS_PER_SOL,
} from '@solana/web3.js';

export function SendSol() {
  const { account, connection, signAndSendTransaction } = useMobileWallet();
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {
    if (!account) return;

    try {
      setLoading(true);

      // Get fresh blockhash
      const { blockhash, lastValidBlockHeight } =
        await connection.getLatestBlockhash();

      // Build transaction
      const transaction = new Transaction({
        feePayer: account.address,
        blockhash,
        lastValidBlockHeight,
      }).add(
        SystemProgram.transfer({
          fromPubkey: account.address,
          toPubkey: new PublicKey(recipient),
          lamports: Math.floor(parseFloat(amount) * LAMPORTS_PER_SOL),
        })
      );

      // Sign and send
      const signature = await signAndSendTransaction(transaction);

      // Confirm
      await connection.confirmTransaction({
        signature,
        blockhash,
        lastValidBlockHeight,
      });

      Alert.alert('Success', `Sent ${amount} SOL\n\nSignature: ${signature.slice(0, 20)}...`);
    } catch (error: any) {
      Alert.alert('Error', error.message);
    } finally {
      setLoading(false);
    }
  };

  if (!account) return <Text>Connect wallet first</Text>;

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Recipient Address"
        value={recipient}
        onChangeText={setRecipient}
        style={{ borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 4 }}
      />
      <TextInput
        placeholder="Amount (SOL)"
        value={amount}
        onChangeText={setAmount}
        keyboardType="decimal-pad"
        style={{ borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 4 }}
      />
      <Pressable
        onPress={handleSend}
        disabled={loading || !recipient || !amount}
        style={{
          backgroundColor: '#9945FF',
          padding: 15,
          borderRadius: 8,
          opacity: loading ? 0.6 : 1,
        }}
      >
        <Text style={{ color: 'white', textAlign: 'center', fontWeight: 'bold' }}>
          {loading ? 'Sending...' : 'Send SOL'}
        </Text>
      </Pressable>
    </View>
  );
}

// 1. Get fresh blockhash
const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash();

// 2. Build transaction
const transaction = new Transaction({
  feePayer: account.address,
  blockhash,
  lastValidBlockHeight,
}).add(/* instructions */);

// 3. Sign and send
const signature = await signAndSendTransaction(transaction);

// 4. Confirm
await connection.confirmTransaction({ signature, blockhash, lastValidBlockHeight });

// WRONG - Buffer doesn't exist in RN
Buffer.from(signature).toString('base64');

// CORRECT
btoa(String.fromCharCode(...signature));