import React from 'react';
import { View, Text, ScrollView, StyleSheet, SafeAreaView } from 'react-native';

const TX = [
  { id: 1, name: 'Spotify', sub: 'Subscriptions', amt: -11.99, icon: '🎧' },
  { id: 2, name: 'Salary', sub: 'Acme Inc', amt: 4200.0, icon: '💼' },
  { id: 3, name: 'Whole Foods', sub: 'Groceries', amt: -86.4, icon: '🛒' },
  { id: 4, name: 'Uber', sub: 'Transport', amt: -18.2, icon: '🚕' },
  { id: 5, name: 'Refund', sub: 'Amazon', amt: 32.5, icon: '📦' },
];
const fmt = (n) => (n < 0 ? '-' : '+') + '$' + Math.abs(n).toFixed(2);

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.hi}>Good afternoon, Maya</Text>
        <View style={s.card}>
          <Text style={s.cardLabel}>Total balance</Text>
          <Text style={s.balance}>$12,480.55</Text>
          <View style={s.cardRow}>
            <Text style={s.cardNum}>•••• 4921</Text>
            <Text style={s.cardChange}>+2.4% this month</Text>
          </View>
        </View>
        <View style={s.actions}>
          {[['Send', '↑'], ['Request', '↓'], ['Top up', '+'], ['More', '•••']].map(([l, i]) => (
            <View key={l} style={s.action}>
              <View style={s.actionBtn}><Text style={s.actionIcon}>{i}</Text></View>
              <Text style={s.actionLabel}>{l}</Text>
            </View>
          ))}
        </View>
        <Text style={s.section}>Recent activity</Text>
        {TX.map((t) => (
          <View key={t.id} style={s.tx}>
            <View style={s.txIcon}><Text style={{ fontSize: 20 }}>{t.icon}</Text></View>
            <View style={{ flex: 1 }}>
              <Text style={s.txName}>{t.name}</Text>
              <Text style={s.txSub}>{t.sub}</Text>
            </View>
            <Text style={[s.txAmt, { color: t.amt < 0 ? '#EDEDF2' : '#22C55E' }]}>{fmt(t.amt)}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0C0A' },
  scroll: { padding: 22, paddingTop: 60 },
  hi: { color: '#8A8A96', fontSize: 16, fontWeight: '500' },
  card: { backgroundColor: '#0F1A12', borderRadius: 24, padding: 24, marginTop: 16, borderWidth: 1, borderColor: '#1B3322' },
  cardLabel: { color: '#5FAE7A', fontSize: 13, fontWeight: '600' },
  balance: { color: '#fff', fontSize: 42, fontWeight: '800', marginTop: 8, letterSpacing: -1 },
  cardRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 18 },
  cardNum: { color: '#7FBF95', fontSize: 15, letterSpacing: 2 },
  cardChange: { color: '#22C55E', fontSize: 14, fontWeight: '600' },
  actions: { flexDirection: 'row', justifyContent: 'space-between', marginVertical: 26 },
  action: { alignItems: 'center' },
  actionBtn: { width: 58, height: 58, borderRadius: 19, backgroundColor: '#141815', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#222' },
  actionIcon: { color: '#22C55E', fontSize: 22, fontWeight: '700' },
  actionLabel: { color: '#9A9AA6', fontSize: 13, marginTop: 8 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginBottom: 12 },
  tx: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12 },
  txIcon: { width: 46, height: 46, borderRadius: 14, backgroundColor: '#141815', alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  txName: { color: '#EDEDF2', fontSize: 16, fontWeight: '600' },
  txSub: { color: '#6A6A78', fontSize: 13, marginTop: 2 },
  txAmt: { fontSize: 16, fontWeight: '700' },
});