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

const TASKS = [
  { id: 1, name: 'Morning walk', time: '7:30 AM', icon: '🦮' },
  { id: 2, name: 'Breakfast', time: '8:00 AM', icon: '🍖' },
  { id: 3, name: 'Evening walk', time: '6:00 PM', icon: '🌆' },
  { id: 4, name: 'Flea meds', time: 'Today', icon: '💊' },
];

export default function App() {
  const [done, setDone] = useState<Record<number, boolean>>({ 1: true, 2: true });
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <View style={s.profile}>
          <View style={s.avatar}><Text style={{ fontSize: 48 }}>🐕</Text></View>
          <Text style={s.name}>Biscuit</Text>
          <Text style={s.breed}>Golden Retriever · 3 yrs</Text>
        </View>
        <View style={s.stats}>
          <View style={s.stat}><Text style={s.statN}>2.4k</Text><Text style={s.statL}>steps</Text></View>
          <View style={s.stat}><Text style={s.statN}>28.5</Text><Text style={s.statL}>kg</Text></View>
          <View style={s.stat}><Text style={s.statN}>Apr 2</Text><Text style={s.statL}>next vet</Text></View>
        </View>
        <Text style={s.section}>Today's care</Text>
        {TASKS.map((t) => {
          const on = done[t.id];
          return (
            <Pressable key={t.id} onPress={() => setDone((d) => ({ ...d, [t.id]: !d[t.id] }))} style={s.row}>
              <Text style={s.rowIcon}>{t.icon}</Text>
              <View style={{ flex: 1 }}>
                <Text style={[s.rowName, on && s.done]}>{t.name}</Text>
                <Text style={s.rowTime}>{t.time}</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: '#110C07' },
  scroll: { padding: 22, paddingTop: 56 },
  profile: { alignItems: 'center', marginBottom: 22 },
  avatar: { width: 96, height: 96, borderRadius: 48, backgroundColor: '#22160C', alignItems: 'center', justifyContent: 'center' },
  name: { color: '#fff', fontSize: 26, fontWeight: '800', marginTop: 12 },
  breed: { color: '#B08A60', fontSize: 14, marginTop: 4 },
  stats: { flexDirection: 'row', backgroundColor: '#1A120A', borderRadius: 18, padding: 18, justifyContent: 'space-between', marginBottom: 26 },
  stat: { alignItems: 'center', flex: 1 },
  statN: { color: '#fff', fontSize: 20, fontWeight: '800' },
  statL: { color: '#B08A60', fontSize: 12, marginTop: 3 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginBottom: 12 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#160F09', borderRadius: 16, padding: 16, marginBottom: 12 },
  rowIcon: { fontSize: 26, marginRight: 14 },
  rowName: { color: '#EDE3D6', fontSize: 16, fontWeight: '600' },
  done: { color: '#6E5C45', textDecorationLine: 'line-through' },
  rowTime: { color: '#B08A60', fontSize: 13, marginTop: 3 },
  check: { width: 28, height: 28, borderRadius: 14, borderWidth: 2, borderColor: '#3A2A18', alignItems: 'center', justifyContent: 'center' },
  checkOn: { backgroundColor: '#F59E42', borderColor: '#F59E42' },
  checkM: { color: '#2A1A0A', fontWeight: '900' },
});