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

const ACTIONS = [
  { id: 1, text: 'Draft the Q3 vision doc', done: false },
  { id: 2, text: 'Schedule 1:1s with the team', done: true },
  { id: 3, text: 'Read two chapters of Deep Work', done: false },
];

export default function App() {
  const [items, setItems] = useState(ACTIONS);
  const toggle = (id) => setItems((xs) => xs.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>YOUR COACH · DANA</Text>
        <View style={s.session}>
          <Text style={s.sessionLabel}>NEXT SESSION</Text>
          <Text style={s.sessionTitle}>Leadership clarity</Text>
          <Text style={s.sessionTime}>Thursday · 3:00 PM · 45 min</Text>
          <View style={s.join}><Text style={s.joinText}>Join call</Text></View>
        </View>
        <Text style={s.section}>Focus areas</Text>
        <View style={s.areas}>
          {[['Confidence', 72], ['Delegation', 48], ['Focus', 85]].map(([n, p]) => (
            <View key={n} style={s.area}>
              <Text style={s.areaName}>{n}</Text>
              <View style={s.track}><View style={[s.fill, { width: p + '%' }]} /></View>
            </View>
          ))}
        </View>
        <Text style={s.section}>Action items</Text>
        {items.map((it) => (
          <Pressable key={it.id} onPress={() => toggle(it.id)} style={s.row}>
            <View style={[s.check, it.done && s.checkOn]}>{it.done ? <Text style={s.checkM}>✓</Text> : null}</View>
            <Text style={[s.rowText, it.done && s.rowDone]}>{it.text}</Text>
          </Pressable>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#100B06' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#F0A93B', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  session: { backgroundColor: '#1B1207', borderRadius: 22, padding: 22, marginTop: 14, borderWidth: 1, borderColor: '#33260F' },
  sessionLabel: { color: '#F0A93B', fontSize: 11, fontWeight: '700', letterSpacing: 1.5 },
  sessionTitle: { color: '#fff', fontSize: 24, fontWeight: '800', marginTop: 8 },
  sessionTime: { color: '#BFA071', fontSize: 15, marginTop: 6 },
  join: { backgroundColor: '#F0A93B', borderRadius: 14, paddingVertical: 13, alignItems: 'center', marginTop: 18 },
  joinText: { color: '#2A1C08', fontSize: 16, fontWeight: '800' },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 28, marginBottom: 14 },
  areas: { gap: 14 },
  area: { },
  areaName: { color: '#D8C4A2', fontSize: 14, fontWeight: '600', marginBottom: 8 },
  track: { height: 9, borderRadius: 5, backgroundColor: '#231a0e', overflow: 'hidden' },
  fill: { height: '100%', backgroundColor: '#F0A93B', borderRadius: 5 },
  row: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#160F08', borderRadius: 14, padding: 16, marginBottom: 10 },
  check: { width: 26, height: 26, borderRadius: 8, borderWidth: 2, borderColor: '#3A2C14', alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  checkOn: { backgroundColor: '#F0A93B', borderColor: '#F0A93B' },
  checkM: { color: '#2A1C08', fontWeight: '900' },
  rowText: { color: '#E6D8C0', fontSize: 15, flex: 1, fontWeight: '500' },
  rowDone: { color: '#6E5C3E', textDecorationLine: 'line-through' },
});