import { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Pedometer } from 'expo-sensors';

export default function App() {
  const [steps, setSteps] = useState(0);
  const [today, setToday] = useState(null);
  const [msg, setMsg] = useState('');

  useEffect(() => {
    let sub;
    (async () => {
      const ok = await Pedometer.isAvailableAsync();
      if (!ok) { setMsg('Pedometer unavailable'); return; }
      const p = await Pedometer.requestPermissionsAsync();
      if (!p.granted) { setMsg('Permission denied'); return; }
      const end = new Date(), start = new Date();
      start.setHours(0,0,0,0);
      try {
        const r = await Pedometer.getStepCountAsync(start, end);
        setToday(r.steps);
      } catch {}
      sub = Pedometer.watchStepCount(r => setSteps(r.steps));
    })();
    return () => sub && sub.remove();
  }, []);

  return (
    <View style={s.c}>
      <Text style={s.t}>Step Tracker</Text>
      <View style={s.card}>
        <Text style={s.l}>Since opened</Text>
        <Text style={s.v}>{steps}</Text>
      </View>
      {today !== null && (
        <View style={s.card}>
          <Text style={s.l}>Today total</Text>
          <Text style={s.v}>{today}</Text>
        </View>
      )}
      <TouchableOpacity style={s.b} onPress={() => setSteps(0)}>
        <Text style={s.bt}>Reset session</Text>
      </TouchableOpacity>
      {msg ? <Text style={s.e}>{msg}</Text> : null}
    </View>
  );
}

const s = StyleSheet.create({
  c: { flex: 1, backgroundColor: '#0a0a0a', padding: 24 },
  t: { color: '#fff', fontSize: 28, fontWeight: '700' },
  card: { backgroundColor: '#171717', borderRadius: 16, padding: 20 },
  l: { color: '#888', fontSize: 13, textTransform: 'uppercase' },
  v: { color: '#fff', fontSize: 56, fontWeight: '800' },
  b: { backgroundColor: '#fff', borderRadius: 999, padding: 14 },
  bt: { color: '#000', fontWeight: '700' },
  e: { color: '#f87171' },
});