import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Pressable, StyleSheet, SafeAreaView, Animated, Easing } from 'react-native';

export default function App() {
  const scale = useRef(new Animated.Value(0.55)).current;
  const [running, setRunning] = useState(true);
  const [phase, setPhase] = useState('Breathe in');

  useEffect(() => {
    let mounted = true;
    const cycle = () => {
      if (!mounted) return;
      setPhase('Breathe in');
      Animated.timing(scale, { toValue: 1, duration: 4000, easing: Easing.inOut(Easing.ease), useNativeDriver: false }).start(() => {
        if (!mounted) return;
        setPhase('Hold');
        Animated.timing(scale, { toValue: 1, duration: 1500, easing: Easing.linear, useNativeDriver: false }).start(() => {
          if (!mounted) return;
          setPhase('Breathe out');
          Animated.timing(scale, { toValue: 0.55, duration: 4000, easing: Easing.inOut(Easing.ease), useNativeDriver: false }).start(() => mounted && cycle());
        });
      });
    };
    if (running) cycle();
    return () => { mounted = false; scale.stopAnimation(); };
  }, [running]);

  return (
    <SafeAreaView style={s.safe}>
      <View style={s.header}>
        <Text style={s.kicker}>EVENING CALM</Text>
        <Text style={s.h1}>4-7-8 Breathing</Text>
      </View>
      <View style={s.center}>
        <View style={s.glow}>
          <Animated.View style={[s.orb, { transform: [{ scale }] }]}>
            <View style={s.orbInner} />
          </Animated.View>
        </View>
        <Text style={s.phase}>{phase}</Text>
      </View>
      <View style={s.footer}>
        <View style={s.stats}>
          <View style={s.stat}><Text style={s.statN}>3:00</Text><Text style={s.statL}>session</Text></View>
          <View style={s.stat}><Text style={s.statN}>12</Text><Text style={s.statL}>day streak</Text></View>
        </View>
        <Pressable onPress={() => setRunning((r) => !r)} style={({ pressed }) => [s.btn, pressed && { opacity: 0.8 }]}>
          <Text style={s.btnText}>{running ? 'Pause' : 'Resume'}</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#05181C' },
  header: { paddingTop: 64, paddingHorizontal: 26, alignItems: 'center' },
  kicker: { color: '#3FB8AF', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#EAFBF9', fontSize: 26, fontWeight: '800', marginTop: 6 },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  glow: { width: 260, height: 260, borderRadius: 130, backgroundColor: 'rgba(63,184,175,0.08)', alignItems: 'center', justifyContent: 'center' },
  orb: { width: 220, height: 220, borderRadius: 110, backgroundColor: 'rgba(63,184,175,0.18)', alignItems: 'center', justifyContent: 'center' },
  orbInner: { width: 140, height: 140, borderRadius: 70, backgroundColor: 'rgba(63,184,175,0.42)' },
  phase: { color: '#EAFBF9', fontSize: 22, fontWeight: '600', marginTop: 40, letterSpacing: 0.5 },
  footer: { paddingHorizontal: 26, paddingBottom: 40 },
  stats: { flexDirection: 'row', justifyContent: 'center', gap: 48, marginBottom: 22 },
  stat: { alignItems: 'center' },
  statN: { color: '#EAFBF9', fontSize: 20, fontWeight: '700' },
  statL: { color: '#5E8A88', fontSize: 12, marginTop: 2 },
  btn: { backgroundColor: '#3FB8AF', borderRadius: 30, paddingVertical: 17, alignItems: 'center' },
  btnText: { color: '#04221F', fontSize: 17, fontWeight: '800' },
});