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

const COINS = [
  { sym: 'BTC', name: 'Bitcoin', price: 67482, chg: 2.4, icon: '₿', c: '#F7931A' },
  { sym: 'ETH', name: 'Ethereum', price: 3521, chg: -1.2, icon: 'Ξ', c: '#627EEA' },
  { sym: 'SOL', name: 'Solana', price: 168, chg: 5.8, icon: '◎', c: '#14F195' },
  { sym: 'ADA', name: 'Cardano', price: 0.59, chg: 0.9, icon: '₳', c: '#0033AD' },
  { sym: 'DOT', name: 'Polkadot', price: 7.21, chg: -3.1, icon: '●', c: '#E6007A' },
];

export default function App() {
  const [range, setRange] = useState('1W');
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>PORTFOLIO</Text>
        <Text style={s.balance}>$48,209.18</Text>
        <Text style={s.change}>▲ $1,204.55 (2.6%) today</Text>

        <View style={s.spark}>
          {[30, 42, 38, 55, 48, 62, 58, 70, 64, 78, 72, 88].map((h, i) => (
            <View key={i} style={[s.sparkBar, { height: h }]} />
          ))}
        </View>
        <View style={s.ranges}>
          {['1D', '1W', '1M', '1Y'].map((r) => (
            <Pressable key={r} onPress={() => setRange(r)} style={[s.range, range === r && s.rangeOn]}>
              <Text style={[s.rangeText, range === r && s.rangeTextOn]}>{r}</Text>
            </Pressable>
          ))}
        </View>

        <Text style={s.section}>Holdings</Text>
        {COINS.map((c) => (
          <View key={c.sym} style={s.coin}>
            <View style={[s.coinIcon, { backgroundColor: c.c + '22' }]}><Text style={[s.coinGlyph, { color: c.c }]}>{c.icon}</Text></View>
            <View style={{ flex: 1 }}>
              <Text style={s.coinName}>{c.name}</Text>
              <Text style={s.coinSym}>{c.sym}</Text>
            </View>
            <View style={{ alignItems: 'flex-end' }}>
              <Text style={s.coinPrice}>{'$' + c.price.toLocaleString()}</Text>
              <Text style={[s.coinChg, { color: c.chg < 0 ? '#FF5C5C' : '#22C55E' }]}>{(c.chg < 0 ? '' : '+') + c.chg + '%'}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0A0D' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#F7931A', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  balance: { color: '#fff', fontSize: 42, fontWeight: '800', marginTop: 6, letterSpacing: -1 },
  change: { color: '#22C55E', fontSize: 15, fontWeight: '600', marginTop: 4 },
  spark: { flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', height: 96, marginTop: 24, gap: 6 },
  sparkBar: { flex: 1, backgroundColor: '#F7931A', borderRadius: 4, opacity: 0.85 },
  ranges: { flexDirection: 'row', gap: 10, marginTop: 18 },
  range: { paddingVertical: 8, paddingHorizontal: 18, borderRadius: 20, backgroundColor: '#15151B' },
  rangeOn: { backgroundColor: '#F7931A' },
  rangeText: { color: '#8A8A96', fontSize: 14, fontWeight: '600' },
  rangeTextOn: { color: '#1A1206' },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 8 },
  coin: { flexDirection: 'row', alignItems: 'center', paddingVertical: 13 },
  coinIcon: { width: 46, height: 46, borderRadius: 23, alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  coinGlyph: { fontSize: 22, fontWeight: '700' },
  coinName: { color: '#EDEDF2', fontSize: 16, fontWeight: '600' },
  coinSym: { color: '#6A6A78', fontSize: 13, marginTop: 2 },
  coinPrice: { color: '#EDEDF2', fontSize: 16, fontWeight: '700' },
  coinChg: { fontSize: 14, fontWeight: '600', marginTop: 2 },
});