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

const STAGES = [
  { label: 'Awake', h: 16, c: '#3A3F5C' },
  { label: 'REM', h: 46, c: '#6C8BFF' },
  { label: 'Light', h: 70, c: '#4A5BA8' },
  { label: 'Deep', h: 38, c: '#2E3A78' },
];
const NIGHTS = [62, 78, 71, 84, 69, 88, 81];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>LAST NIGHT</Text>
        <Text style={s.h1}>You slept well</Text>

        <View style={s.scoreCard}>
          <View style={s.scoreRing}>
            <Text style={s.score}>88</Text>
            <Text style={s.scoreLabel}>sleep score</Text>
          </View>
          <View style={s.scoreMeta}>
            <View style={s.metaRow}><Text style={s.metaIcon}>🛏️</Text><Text style={s.metaText}>11:24 PM</Text></View>
            <View style={s.metaRow}><Text style={s.metaIcon}>☀️</Text><Text style={s.metaText}>7:02 AM</Text></View>
            <View style={s.metaRow}><Text style={s.metaIcon}>⏱️</Text><Text style={s.metaText}>7h 38m</Text></View>
          </View>
        </View>

        <Text style={s.section}>Sleep stages</Text>
        <View style={s.stages}>
          {STAGES.map((st) => (
            <View key={st.label} style={s.stageCol}>
              <View style={s.stageBarWrap}>
                <View style={[s.stageBar, { height: st.h * 1.6, backgroundColor: st.c }]} />
              </View>
              <Text style={s.stageLabel}>{st.label}</Text>
            </View>
          ))}
        </View>

        <Text style={s.section}>This week</Text>
        <View style={s.week}>
          {NIGHTS.map((n, i) => (
            <View key={i} style={s.nightCol}>
              <View style={[s.nightBar, { height: n * 1.1 }]} />
              <Text style={s.nightLabel}>{'SMTWTFS'[i]}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#080A14' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#6C8BFF', fontSize: 12, fontWeight: '700', letterSpacing: 1.5 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4 },
  scoreCard: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0F1322', borderRadius: 22, padding: 22, marginTop: 22 },
  scoreRing: { width: 116, height: 116, borderRadius: 58, borderWidth: 8, borderColor: '#6C8BFF', alignItems: 'center', justifyContent: 'center' },
  score: { color: '#fff', fontSize: 38, fontWeight: '800' },
  scoreLabel: { color: '#7A85B8', fontSize: 11, marginTop: 2 },
  scoreMeta: { flex: 1, marginLeft: 24, gap: 12 },
  metaRow: { flexDirection: 'row', alignItems: 'center' },
  metaIcon: { fontSize: 16, width: 28 },
  metaText: { color: '#C9CEE8', fontSize: 16, fontWeight: '600' },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 16 },
  stages: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'flex-end', backgroundColor: '#0F1322', borderRadius: 18, padding: 20, height: 170 },
  stageCol: { alignItems: 'center', justifyContent: 'flex-end' },
  stageBarWrap: { justifyContent: 'flex-end', height: 120 },
  stageBar: { width: 40, borderRadius: 10 },
  stageLabel: { color: '#7A85B8', fontSize: 12, marginTop: 10 },
  week: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', height: 130 },
  nightCol: { alignItems: 'center', justifyContent: 'flex-end' },
  nightBar: { width: 30, borderRadius: 8, backgroundColor: '#4A5BA8' },
  nightLabel: { color: '#7A85B8', fontSize: 12, marginTop: 8 },
});