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

const MSGS = [
  { me: false, text: 'Morning! Still on for the hike Saturday? 🥾', time: '9:02' },
  { me: true, text: 'Yes! Weather looks perfect ☀️', time: '9:04' },
  { me: false, text: 'Trailhead at 8?' , time: '9:04' },
  { me: true, text: 'Make it 8:15 and bring coffee and I am in', time: '9:06' },
  { me: false, text: 'Deal. I will grab the good stuff ☕', time: '9:07' },
];

export default function App() {
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.header}>
        <View style={s.av}><Text style={{ fontSize: 22 }}>🦊</Text></View>
        <View>
          <Text style={s.name}>Leah Carter</Text>
          <Text style={s.status}>● Active now</Text>
        </View>
      </View>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.day}>TODAY</Text>
        {MSGS.map((m, i) => (
          <View key={i} style={[s.bubbleRow, m.me ? s.right : s.left]}>
            <View style={[s.bubble, m.me ? s.bubbleMe : s.bubbleThem]}>
              <Text style={[s.text, m.me && { color: '#fff' }]}>{m.text}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
      <View style={s.composer}>
        <View style={s.input}><Text style={s.placeholder}>Message</Text></View>
        <View style={s.send}><Text style={{ color: '#fff', fontSize: 18, fontWeight: '800' }}>↑</Text></View>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0C10' },
  header: { flexDirection: 'row', alignItems: 'center', paddingTop: 56, paddingBottom: 16, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#16181E' },
  av: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#161A22', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
  name: { color: '#fff', fontSize: 17, fontWeight: '700' },
  status: { color: '#3B82F6', fontSize: 13, marginTop: 2 },
  scroll: { padding: 18, paddingBottom: 8 },
  day: { color: '#5A5E68', fontSize: 11, fontWeight: '700', textAlign: 'center', marginBottom: 16, letterSpacing: 1 },
  bubbleRow: { flexDirection: 'row', marginBottom: 10 },
  left: { justifyContent: 'flex-start' },
  right: { justifyContent: 'flex-end' },
  bubble: { maxWidth: '78%', borderRadius: 20, paddingVertical: 11, paddingHorizontal: 15 },
  bubbleThem: { backgroundColor: '#1A1E26', borderBottomLeftRadius: 6 },
  bubbleMe: { backgroundColor: '#3B82F6', borderBottomRightRadius: 6 },
  text: { color: '#E6E8EE', fontSize: 15, lineHeight: 20 },
  composer: { flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12, borderTopWidth: 1, borderTopColor: '#16181E' },
  input: { flex: 1, height: 44, borderRadius: 22, backgroundColor: '#161A22', justifyContent: 'center', paddingHorizontal: 18 },
  placeholder: { color: '#5A5E68', fontSize: 15 },
  send: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#3B82F6', alignItems: 'center', justifyContent: 'center' },
});