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

const KPIS = [
  { label: 'Revenue', value: '$48.2k', delta: '+12%', up: true },
  { label: 'Expenses', value: '$19.4k', delta: '-4%', up: true },
  { label: 'Clients', value: '38', delta: '+3', up: true },
  { label: 'Overdue', value: '$2.1k', delta: '2 invoices', up: false },
];
const BARS = [40, 55, 48, 70, 62, 85, 78];
const INVOICES = [
  { client: 'Northwind Co', amt: '$4,200', status: 'Paid', c: '#34D399' },
  { client: 'Acme Studio', amt: '$1,800', status: 'Pending', c: '#FBBF24' },
  { client: 'Vertex Labs', amt: '$960', status: 'Overdue', c: '#F87171' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>OVERVIEW · MAY</Text>
        <Text style={s.h1}>Good week 📈</Text>
        <View style={s.chart}>
          {BARS.map((b, i) => (<View key={i} style={s.barCol}><View style={[s.bar, { height: b }]} /></View>))}
        </View>
        <View style={s.grid}>
          {KPIS.map((k) => (
            <View key={k.label} style={s.kpi}>
              <Text style={s.kpiLabel}>{k.label}</Text>
              <Text style={s.kpiValue}>{k.value}</Text>
              <Text style={[s.kpiDelta, { color: k.up ? '#34D399' : '#F87171' }]}>{k.delta}</Text>
            </View>
          ))}
        </View>
        <Text style={s.section}>Recent invoices</Text>
        {INVOICES.map((iv, i) => (
          <View key={i} style={s.row}>
            <View style={{ flex: 1 }}><Text style={s.client}>{iv.client}</Text><Text style={s.amt}>{iv.amt}</Text></View>
            <View style={[s.pill, { backgroundColor: iv.c + '22' }]}><Text style={[s.pillText, { color: iv.c }]}>{iv.status}</Text></View>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#07120D' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#34D399', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4 },
  chart: { flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', height: 110, backgroundColor: '#0C1C16', borderRadius: 18, padding: 18, marginVertical: 22 },
  barCol: { flex: 1, alignItems: 'center', justifyContent: 'flex-end' },
  bar: { width: 18, borderRadius: 5, backgroundColor: '#34D399' },
  grid: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
  kpi: { width: '48%', backgroundColor: '#0C1C16', borderRadius: 16, padding: 16, marginBottom: 14 },
  kpiLabel: { color: '#6FAF95', fontSize: 13, fontWeight: '600' },
  kpiValue: { color: '#fff', fontSize: 24, fontWeight: '800', marginTop: 8 },
  kpiDelta: { fontSize: 13, fontWeight: '700', marginTop: 4 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 16, marginBottom: 12 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0B1813', borderRadius: 14, padding: 16, marginBottom: 10 },
  client: { color: '#E6F2EC', fontSize: 16, fontWeight: '600' },
  amt: { color: '#6FAF95', fontSize: 14, marginTop: 3 },
  pill: { borderRadius: 12, paddingVertical: 6, paddingHorizontal: 12 },
  pillText: { fontSize: 13, fontWeight: '700' },
});