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

const INIT = [
  { id: 1, group: 'Today', text: 'Ship the landing page', pri: 'high', done: false },
  { id: 2, group: 'Today', text: 'Review pull requests', pri: 'med', done: false },
  { id: 3, group: 'Today', text: 'Reply to Dana', pri: 'low', done: true },
  { id: 4, group: 'Upcoming', text: 'Plan Q3 roadmap', pri: 'med', done: false },
  { id: 5, group: 'Upcoming', text: 'Book dentist', pri: 'low', done: false },
];
const PRI = { high: '#FF5C5C', med: '#FFB020', low: '#5CCB6A' };

export default function App() {
  const [items, setItems] = useState(INIT);
  const done = items.filter((i) => i.done).length;
  const toggle = (id) => setItems((xs) => xs.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
  const groups = ['Today', 'Upcoming'];
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>TASKS</Text>
        <Text style={s.h1}>{done} of {items.length} done</Text>
        <View style={s.track}><View style={[s.fill, { width: (done / items.length * 100) + '%' }]} /></View>
        {groups.map((g) => (
          <View key={g}>
            <Text style={s.section}>{g}</Text>
            {items.filter((i) => i.group === g).map((i) => (
              <Pressable key={i.id} onPress={() => toggle(i.id)} style={s.row}>
                <View style={[s.check, i.done && s.checkOn]}>{i.done ? <Text style={s.checkM}>✓</Text> : null}</View>
                <Text style={[s.text, i.done && s.textDone]}>{i.text}</Text>
                <View style={[s.dot, { backgroundColor: PRI[i.pri] }]} />
              </Pressable>
            ))}
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0B0B12' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#818CF8', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4, marginBottom: 16 },
  track: { height: 8, borderRadius: 4, backgroundColor: '#1C1C28', overflow: 'hidden' },
  fill: { height: '100%', backgroundColor: '#6366F1', borderRadius: 4 },
  section: { color: '#8A8A99', fontSize: 13, fontWeight: '700', letterSpacing: 1, marginTop: 26, marginBottom: 10, textTransform: 'uppercase' },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#13131C', borderRadius: 14, padding: 16, marginBottom: 10 },
  check: { width: 26, height: 26, borderRadius: 8, borderWidth: 2, borderColor: '#33333E', alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  checkOn: { backgroundColor: '#6366F1', borderColor: '#6366F1' },
  checkM: { color: '#fff', fontWeight: '900', fontSize: 14 },
  text: { color: '#EDEDF2', fontSize: 16, fontWeight: '500', flex: 1 },
  textDone: { color: '#5A5A66', textDecorationLine: 'line-through' },
  dot: { width: 10, height: 10, borderRadius: 5, marginLeft: 10 },
});