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

export default function App() {
  const [secs, setSecs] = useState(25 * 60);
  const [running, setRunning] = useState(false);
  const [done, setDone] = useState(2);
  const timer = useRef<any>(null);

  useEffect(() => {
    if (running) {
      timer.current = setInterval(() => setSecs((x) => (x > 0 ? x - 1 : 0)), 1000);
    }
    return () => clearInterval(timer.current);
  }, [running]);

  const mm = String(Math.floor(secs / 60)).padStart(2, '0');
  const ss = String(secs % 60).padStart(2, '0');

  return (
    <SafeAreaView style={s.safe}>
      <View style={s.top}>
        <Text style={s.kicker}>FOCUS SESSION</Text>
        <Text style={s.task}>Design review</Text>
      </View>
      <View style={s.center}>
        <View style={s.dial}>
          <Text style={s.time}>{mm}:{ss}</Text>
          <Text style={s.timeSub}>{running ? 'in progress' : 'paused'}</Text>
        </View>
        <View style={s.dots}>
          {[0, 1, 2, 3].map((i) => (
            <View key={i} style={[s.dot, i < done && s.dotOn]} />
          ))}
        </View>
        <Text style={s.dotsLabel}>{done} of 4 sessions today</Text>
      </View>
      <View style={s.footer}>
        <Pressable onPress={() => setRunning((r) => !r)} style={({ pressed }) => [s.btn, pressed && { opacity: 0.85 }]}>
          <Text style={s.btnText}>{running ? 'Pause focus' : 'Start focus'}</Text>
        </Pressable>
        <Pressable onPress={() => { setSecs(25 * 60); setRunning(false); }} style={s.reset}>
          <Text style={s.resetText}>Reset</Text>
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0C0A0A' },
  top: { paddingTop: 64, alignItems: 'center' },
  kicker: { color: '#FF6B5C', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  task: { color: '#fff', fontSize: 24, fontWeight: '800', marginTop: 6 },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  dial: { width: 250, height: 250, borderRadius: 125, borderWidth: 3, borderColor: '#2A1C1A', backgroundColor: '#161010', alignItems: 'center', justifyContent: 'center' },
  time: { color: '#fff', fontSize: 60, fontWeight: '200', letterSpacing: 1, fontVariant: ['tabular-nums'] },
  timeSub: { color: '#8A6A66', fontSize: 14, marginTop: 6 },
  dots: { flexDirection: 'row', gap: 12, marginTop: 40 },
  dot: { width: 12, height: 12, borderRadius: 6, backgroundColor: '#2A1C1A' },
  dotOn: { backgroundColor: '#FF6B5C' },
  dotsLabel: { color: '#8A6A66', fontSize: 13, marginTop: 14 },
  footer: { paddingHorizontal: 26, paddingBottom: 40 },
  btn: { backgroundColor: '#FF6B5C', borderRadius: 30, paddingVertical: 18, alignItems: 'center' },
  btnText: { color: '#2A0E0A', fontSize: 17, fontWeight: '800' },
  reset: { paddingVertical: 16, alignItems: 'center' },
  resetText: { color: '#8A6A66', fontSize: 15, fontWeight: '600' },
});