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

const DATA = [
  { id: 1, name: 'Morning stretch', icon: '🧘', streak: 14 },
  { id: 2, name: 'Read 20 pages', icon: '📖', streak: 9 },
  { id: 3, name: 'Deep work block', icon: '🎯', streak: 21 },
  { id: 4, name: 'Walk outside', icon: '🚶', streak: 5 },
  { id: 5, name: 'No screens after 10', icon: '🌙', streak: 3 },
];

export default function App() {
  const [done, setDone] = useState<Record<number, boolean>>({ 1: true });
  const completed = Object.values(done).filter(Boolean).length;
  const pct = Math.round((completed / DATA.length) * 100);
  const toggle = (id: number) => setDone((d) => ({ ...d, [id]: !d[id] }));

  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>TUESDAY, 14 MAY</Text>
        <Text style={s.h1}>Today</Text>

        <View style={s.ringWrap}>
          <View style={s.ring}>
            <View style={[s.ringInner, { borderColor: pct > 0 ? '#7C5CFF' : '#26262E' }]}>
              <Text style={s.ringPct}>{pct}%</Text>
              <Text style={s.ringSub}>{completed} of {DATA.length}</Text>
            </View>
          </View>
        </View>

        {DATA.map((h) => {
          const on = !!done[h.id];
          return (
            <Pressable key={h.id} onPress={() => toggle(h.id)} style={({ pressed }) => [s.row, pressed && s.pressed]}>
              <View style={[s.iconBox, on && s.iconBoxOn]}>
                <Text style={s.icon}>{h.icon}</Text>
              </View>
              <View style={s.rowMid}>
                <Text style={[s.name, on && s.nameDone]}>{h.name}</Text>
                <Text style={s.streak}>🔥 {h.streak} days</Text>
              </View>
              <View style={[s.check, on && s.checkOn]}>{on ? <Text style={s.checkMark}>✓</Text> : null}</View>
            </Pressable>
          );
        })}
        <View style={{ height: 24 }} />
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0B0B10' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#7C5CFF', fontSize: 12, fontWeight: '700', letterSpacing: 1.5 },
  h1: { color: '#fff', fontSize: 34, fontWeight: '800', marginTop: 4, letterSpacing: -0.5 },
  ringWrap: { alignItems: 'center', marginVertical: 28 },
  ring: { width: 168, height: 168, borderRadius: 84, backgroundColor: '#15151C', alignItems: 'center', justifyContent: 'center' },
  ringInner: { width: 142, height: 142, borderRadius: 71, borderWidth: 9, alignItems: 'center', justifyContent: 'center' },
  ringPct: { color: '#fff', fontSize: 40, fontWeight: '800', letterSpacing: -1 },
  ringSub: { color: '#8A8A96', fontSize: 13, marginTop: 2 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#14141B', borderRadius: 18, padding: 14, marginBottom: 12 },
  pressed: { opacity: 0.7 },
  iconBox: { width: 46, height: 46, borderRadius: 13, backgroundColor: '#1E1E27', alignItems: 'center', justifyContent: 'center' },
  iconBoxOn: { backgroundColor: '#241F3D' },
  icon: { fontSize: 22 },
  rowMid: { flex: 1, marginLeft: 14 },
  name: { color: '#EDEDF2', fontSize: 16, fontWeight: '600' },
  nameDone: { color: '#6A6A78', textDecorationLine: 'line-through' },
  streak: { color: '#8A8A96', fontSize: 13, marginTop: 3 },
  check: { width: 28, height: 28, borderRadius: 14, borderWidth: 2, borderColor: '#33333E', alignItems: 'center', justifyContent: 'center' },
  checkOn: { backgroundColor: '#7C5CFF', borderColor: '#7C5CFF' },
  checkMark: { color: '#fff', fontWeight: '900', fontSize: 15 },
});