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

const EX = [
  { name: 'Barbell squat', sets: '4 × 8', icon: '🦵' },
  { name: 'Bench press', sets: '4 × 10', icon: '💪' },
  { name: 'Deadlift', sets: '3 × 6', icon: '🏋️' },
  { name: 'Pull-ups', sets: '3 × 12', icon: '🧗' },
  { name: 'Plank', sets: '3 × 60s', icon: '🧘' },
];

export default function App() {
  const [done, setDone] = useState<Record<number, boolean>>({});
  const count = Object.values(done).filter(Boolean).length;
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>PUSH DAY · 48 MIN</Text>
        <Text style={s.h1}>Strength A</Text>
        <View style={s.hud}>
          <View style={s.hudItem}><Text style={s.hudN}>{count}/{EX.length}</Text><Text style={s.hudL}>exercises</Text></View>
          <View style={s.hudItem}><Text style={s.hudN}>1,240</Text><Text style={s.hudL}>kg lifted</Text></View>
          <View style={s.hudItem}><Text style={s.hudN}>320</Text><Text style={s.hudL}>kcal</Text></View>
        </View>
        {EX.map((e, i) => {
          const on = done[i];
          return (
            <Pressable key={i} onPress={() => setDone((d) => ({ ...d, [i]: !d[i] }))} style={[s.row, on && s.rowOn]}>
              <Text style={s.exIcon}>{e.icon}</Text>
              <View style={{ flex: 1 }}>
                <Text style={[s.exName, on && { color: '#fff' }]}>{e.name}</Text>
                <Text style={s.exSets}>{e.sets}</Text>
              </View>
              <View style={[s.check, on && s.checkOn]}>{on ? <Text style={s.checkM}>✓</Text> : null}</View>
            </Pressable>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0E0709' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#F43F5E', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 34, fontWeight: '800', marginTop: 4 },
  hud: { flexDirection: 'row', backgroundColor: '#1A0E11', borderRadius: 18, padding: 18, marginVertical: 22, justifyContent: 'space-between' },
  hudItem: { alignItems: 'center', flex: 1 },
  hudN: { color: '#fff', fontSize: 20, fontWeight: '800' },
  hudL: { color: '#A86A74', fontSize: 12, marginTop: 3 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#160C0E', borderRadius: 16, padding: 16, marginBottom: 12 },
  rowOn: { backgroundColor: '#2A1015' },
  exIcon: { fontSize: 26, marginRight: 14 },
  exName: { color: '#EDE0E2', fontSize: 17, fontWeight: '700' },
  exSets: { color: '#A86A74', fontSize: 14, marginTop: 3 },
  check: { width: 30, height: 30, borderRadius: 15, borderWidth: 2, borderColor: '#3A1F24', alignItems: 'center', justifyContent: 'center' },
  checkOn: { backgroundColor: '#F43F5E', borderColor: '#F43F5E' },
  checkM: { color: '#fff', fontWeight: '900', fontSize: 16 },
});