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

const MOODS = [
  { key: 'rough', face: '😣', color: '#7C5CFF' },
  { key: 'meh', face: '😕', color: '#4A8FE7' },
  { key: 'okay', face: '🙂', color: '#3FB8AF' },
  { key: 'good', face: '😄', color: '#FFB020' },
  { key: 'great', face: '🤩', color: '#FF6B9D' },
];
const WEEK = [
  { d: 'M', c: '#4A8FE7' }, { d: 'T', c: '#3FB8AF' }, { d: 'W', c: '#FFB020' },
  { d: 'T', c: '#FF6B9D' }, { d: 'F', c: '#3FB8AF' }, { d: 'S', c: '#FFB020' }, { d: 'S', c: '#2A2A33' },
];

export default function App() {
  const [sel, setSel] = useState('okay');
  const chosen = MOODS.find((m) => m.key === sel)!;
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>HOW ARE YOU?</Text>
        <Text style={s.h1}>Sunday evening</Text>

        <View style={s.moodRow}>
          {MOODS.map((m) => {
            const on = m.key === sel;
            return (
              <Pressable key={m.key} onPress={() => setSel(m.key)} style={[s.mood, on && { backgroundColor: m.color + '33', borderColor: m.color }]}>
                <Text style={[s.face, on && { transform: [{ scale: 1.15 }] }]}>{m.face}</Text>
              </Pressable>
            );
          })}
        </View>

        <View style={[s.card, { borderColor: chosen.color + '55' }]}>
          <Text style={[s.cardBig, { color: chosen.color }]}>{chosen.face}</Text>
          <Text style={s.cardLabel}>Feeling {sel}</Text>
          <Text style={s.cardNote}>Tap a face to update today. Your reflection is saved privately.</Text>
        </View>

        <Text style={s.section}>This week</Text>
        <View style={s.week}>
          {WEEK.map((w, i) => (
            <View key={i} style={s.dayCol}>
              <View style={[s.daySwatch, { backgroundColor: w.c }]} />
              <Text style={s.dayLabel}>{w.d}</Text>
            </View>
          ))}
        </View>

        <View style={s.insight}>
          <Text style={s.insightTitle}>🌈 Brighter midweek</Text>
          <Text style={s.insightBody}>Your best days landed on Wednesday and Thursday this week.</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0E0D14' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#FFB020', fontSize: 12, fontWeight: '700', letterSpacing: 1.5 },
  h1: { color: '#fff', fontSize: 30, fontWeight: '800', marginTop: 4 },
  moodRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 26 },
  mood: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#191824', borderWidth: 2, borderColor: 'transparent', alignItems: 'center', justifyContent: 'center' },
  face: { fontSize: 28 },
  card: { backgroundColor: '#15131F', borderRadius: 22, borderWidth: 1, padding: 24, marginTop: 26, alignItems: 'center' },
  cardBig: { fontSize: 60 },
  cardLabel: { color: '#fff', fontSize: 20, fontWeight: '700', marginTop: 10, textTransform: 'capitalize' },
  cardNote: { color: '#8A8A99', fontSize: 14, textAlign: 'center', marginTop: 8, lineHeight: 20 },
  section: { color: '#fff', fontSize: 18, fontWeight: '700', marginTop: 30, marginBottom: 14 },
  week: { flexDirection: 'row', justifyContent: 'space-between' },
  dayCol: { alignItems: 'center' },
  daySwatch: { width: 34, height: 56, borderRadius: 12 },
  dayLabel: { color: '#6A6A78', fontSize: 13, marginTop: 8 },
  insight: { backgroundColor: '#15131F', borderRadius: 18, padding: 18, marginTop: 26 },
  insightTitle: { color: '#fff', fontSize: 15, fontWeight: '700' },
  insightBody: { color: '#8A8A99', fontSize: 14, marginTop: 6, lineHeight: 20 },
});