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

const GOAL = 8;

export default function App() {
  const [filled, setFilled] = useState(3);
  const pct = Math.round((filled / GOAL) * 100);
  const ml = filled * 250;
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.head}>
        <Text style={s.kicker}>STAY HYDRATED</Text>
        <Text style={s.h1}>{ml} ml</Text>
        <Text style={s.sub}>{filled} of {GOAL} glasses · {pct}%</Text>
      </View>

      <View style={s.barWrap}>
        <View style={s.barTrack}>
          <View style={[s.barFill, { height: pct + '%' }]} />
        </View>
      </View>

      <View style={s.glasses}>
        {Array.from({ length: GOAL }).map((_, i) => {
          const on = i < filled;
          return (
            <Pressable key={i} onPress={() => setFilled(i + 1 === filled ? i : i + 1)} style={[s.glass, on && s.glassOn]}>
              <Text style={s.glassIcon}>{on ? '💧' : '🥛'}</Text>
            </Pressable>
          );
        })}
      </View>

      <Pressable onPress={() => setFilled((f) => Math.min(GOAL, f + 1))} style={({ pressed }) => [s.btn, pressed && { opacity: 0.85 }]}>
        <Text style={s.btnText}>+ Add a glass</Text>
      </Pressable>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#04121C' },
  head: { paddingTop: 64, alignItems: 'center' },
  kicker: { color: '#33B1FF', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 52, fontWeight: '800', marginTop: 8 },
  sub: { color: '#5E8AB0', fontSize: 15, marginTop: 4 },
  barWrap: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  barTrack: { width: 86, height: 240, borderRadius: 43, backgroundColor: '#0B2333', justifyContent: 'flex-end', overflow: 'hidden', borderWidth: 1, borderColor: '#143246' },
  barFill: { width: '100%', backgroundColor: '#33B1FF', borderRadius: 43 },
  glasses: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 12, paddingHorizontal: 30 },
  glass: { width: 52, height: 52, borderRadius: 14, backgroundColor: '#0B2333', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#143246' },
  glassOn: { backgroundColor: '#0E3349', borderColor: '#33B1FF' },
  glassIcon: { fontSize: 22 },
  btn: { backgroundColor: '#33B1FF', margin: 26, borderRadius: 30, paddingVertical: 18, alignItems: 'center' },
  btnText: { color: '#04121C', fontSize: 17, fontWeight: '800' },
});