import React, { useState } from 'react';

import { View, Text, Button, TextInput, FlatList, StyleSheet, Image, ScrollView, Switch } from 'react-native';

import { Picker } from '@react-native-picker/picker';

export default function App() {

// Security & login

const [pin, setPin] = useState('');

const [pinSet, setPinSet] = useState(false);

const [enteredPin, setEnteredPin] = useState('');

const [loggedIn, setLoggedIn] = useState(false);

const [username, setUsername] = useState('');

// Dark mode

const [darkMode, setDarkMode] = useState(false);

// Accounts

const [accounts, setAccounts] = useState([

{ id: '1', name: 'Savings', balance: 5000, transactions: [] },

{ id: '2', name: 'Checking', balance: 2000, transactions: [] }

]);

const [selectedAccount, setSelectedAccount] = useState(accounts[0]);

const [amount, setAmount] = useState('');

const [transferAmount, setTransferAmount] = useState('');

const [transferTo, setTransferTo] = useState(accounts[1].id);

// Transactions helper

const addTransaction = (accountId, type, amt) => {

setAccounts(accounts.map(acc => {

if (acc.id === accountId) {

const newAcc = {

...acc,

balance: type === 'Deposit' || type === 'Transfer In' ? acc.balance + amt : acc.balance - amt,

transactions: [{ id: Date.now().toString(), type, amount: amt }, ...acc.transactions]

};

if (selectedAccount.id === acc.id) setSelectedAccount(newAcc);

return newAcc;

}

return acc;

}));

};

const deposit = () => {

const amt = parseInt(amount || 0);

if (amt > 0) { addTransaction(selectedAccount.id, 'Deposit', amt); setAmount(''); }

};

const withdraw = () => {

const amt = parseInt(amount || 0);

if (amt > 0 && amt <= selectedAccount.balance) { addTransaction(selectedAccount.id, 'Withdrawal', amt); setAmount(''); }

};

const transfer = () => {

const amt = parseInt(transferAmount || 0);

if (amt > 0 && amt <= selectedAccount.balance && transferTo !== selectedAccount.id) {

addTransaction(selectedAccount.id, 'Transfer Out', amt);

addTransaction(transferTo, 'Transfer In', amt);

setTransferAmount('');

}

};

// --- PIN & Login ---

if (!loggedIn) {

if (!pinSet) {

return (

<View style={[styles.container, darkMode && { backgroundColor: '#121212' }]}>

<Text style={[styles.title, darkMode && { color: '#fff' }]}>Set Your 4-Digit PIN</Text>

<TextInput

style={styles.input}

placeholder="Enter PIN"

value={pin}

secureTextEntry

keyboardType="numeric"

maxLength={4}

onChangeText={setPin}

/>

<TextInput

style={styles.input}

placeholder="Enter username"

value={username}

onChangeText={setUsername}

/>

<Button title="Set PIN & Signup" onPress={() => { if(pin.length===4 && username)setPinSet(true) }}/>

</View>

);

}

return (

<View style={[styles.container, darkMode && { backgroundColor: '#121212' }]}>

<Text style={[styles.title, darkMode && { color: '#fff' }]}>Login with PIN</Text>

<TextInput

style={styles.input}

placeholder="Enter PIN"

value={enteredPin}

secureTextEntry

keyboardType="numeric"

maxLength={4}

onChangeText={setEnteredPin}

/>

<Button title="Login" onPress={()=>{ if(enteredPin===pin) setLoggedIn(true)}}/>

</View>

);

}

// --- Main Banking UI ---

return (

<ScrollView style={[styles.container, darkMode && { backgroundColor: '#121212' }]}>

<Image source={{ uri: 'https://i.pravatar.cc/100' }} style={{ width:100, height:100, borderRadius:50, alignSelf:'center', marginBottom:10 }}/>

<Text style={[styles.title, darkMode && { color:'#fff' }]}>Welcome, {username}</Text>

<View style={{ flexDirection:'row', alignItems:'center', marginBottom:10 }}>

<Text style={{ marginRight:10, color: darkMode?'#fff':'#000' }}>Dark Mode</Text>

<Switch value={darkMode} onValueChange={setDarkMode}/>

</View>

<Picker selectedValue={selectedAccount.id} onValueChange={val=>setSelectedAccount(accounts.find(a=>a.id===val))} style={{ marginBottom:20 }}>

{accounts.map(acc=><Picker.Item key={acc.id} label={`${acc.name} ($${acc.balance})`} value={acc.id}/>)}

</Picker>

<Text style={[styles.balance, darkMode && {color:'#fff'}]}>Balance: ${selectedAccount.balance}</Text>

<TextInput style={styles.input} placeholder="Amount" keyboardType="numeric" value={amount} onChangeText={setAmount}/>

<Button title="Deposit" onPress={deposit}/>

<View style={{height:10}}/>

<Button title="Withdraw" onPress={withdraw}/>

<Text style={[{marginTop:20,fontWeight:'bold', color: darkMode?'#fff':'#000'}]}>Transfer to:</Text>

<Picker selectedValue={transferTo} onValueChange={setTransferTo}>

{accounts.filter(a=>a.id!==selectedAccount.id).map(a=><Picker.Item key={a.id} label={`${a.name} ($${a.balance})`} value={a.id}/>)}

</Picker>

<TextInput style={styles.input} placeholder="Transfer Amount" keyboardType="numeric" value={transferAmount} onChangeText={setTransferAmount}/>

<Button title="Transfer" onPress={transfer}/>

<Text style={[styles.historyTitle, darkMode && {color:'#fff'}]}>Transaction History</Text>

{selectedAccount.transactions.length===0 && <Text style={{color:darkMode?'#fff':'#000'}}>No transactions yet</Text>}

<FlatList

data={selectedAccount.transactions}

keyExtractor={item=>item.id}

renderItem={({item})=><Text style={{color:darkMode?'#fff':'#000'}}>{item.type}: ${item.amount}</Text>}

/>

<Text style={[{marginTop:20,fontWeight:'bold'}, darkMode && {color:'#fff'}]}>Card Info:</Text>

<Text style={darkMode && {color:'#fff'}}>Card Number: 1234 5678 9012 3456</Text>

<Text style={darkMode && {color:'#fff'}}>Expiry: 12/30</Text>

<Text style={darkMode && {color:'#fff'}}>CVV: 123</Text>

<Text style={[{marginTop:10,fontWeight:'bold'}, darkMode && {color:'#fff'}]}>Recent Transactions:</Text>

{selectedAccount.transactions.slice(0,3).map(t=><Text key={t.id} style={darkMode && {color:'#fff'}}>{t.type}: ${t.amount}</Text>)}

<View style={{height:30}}/>

</ScrollView>

);

}

const styles = StyleSheet.create({

container: { flex:1, padding:20, backgroundColor:'#fff' },

title: { fontSize:28, fontWeight:'bold', marginBottom:20, textAlign:'center' },

balance: { fontSize:22, marginBottom:20, textAlign:'center' },

input: { borderWidth:1, borderColor:'#ccc', marginBottom:10, padding:10, borderRadius:5 },

historyTitle: { fontSize:18, fontWeight:'bold', marginTop:20 }

});