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

const CHIPS = ['Plan my week', 'Summarize this', 'Write an email', 'Brainstorm ideas'];

export default function App() {
  const [msgs, setMsgs] = useState([
    { me: false, text: 'Hi! I am Nova. What can I help you with today?' },
    { me: true, text: 'Help me plan a focused work week.' },
    { me: false, text: 'Love it. Here is a simple plan: protect your mornings for deep work, batch meetings after lunch, and keep Fridays light for review.' },
    { me: true, text: 'Perfect, can you add reminders?' },
    { me: false, text: 'Done. I will nudge you 10 minutes before each deep-work block and at 4pm on Friday for your weekly review.' },
  ]);
  const ask = (q) => setMsgs((m) => [...m, { me: true, text: q }, { me: false, text: 'Great choice. Here is a quick plan to get you started, broken into three simple steps.' }]);
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.head}>
        <View style={s.avatar}><Text style={{ fontSize: 18 }}>🤖</Text></View>
        <View><Text style={s.name}>Nova</Text><Text style={s.status}>● Online</Text></View>
      </View>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        {msgs.map((m, i) => (
          <View key={i} style={[s.row, m.me ? s.right : s.left]}>
            {!m.me && <View style={s.botDot}><Text style={{ fontSize: 13 }}>✨</Text></View>}
            <View style={[s.bubble, m.me ? s.me : s.bot]}><Text style={[s.text, m.me && { color: '#fff' }]}>{m.text}</Text></View>
          </View>
        ))}
      </ScrollView>
      <View style={s.chips}>
        {CHIPS.map((c) => (<Pressable key={c} onPress={() => ask(c)} style={s.chip}><Text style={s.chipText}>{c}</Text></Pressable>))}
      </View>
      <View style={s.composer}>
        <View style={s.input}><Text style={s.placeholder}>Message Nova</Text></View>
        <View style={s.send}><Text style={{ color: '#fff', fontWeight: '800' }}>↑</Text></View>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#0A0F0D' },
  head: { flexDirection: 'row', alignItems: 'center', paddingTop: 56, paddingBottom: 14, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#15201C' },
  avatar: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#10A37F22', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
  name: { color: '#fff', fontSize: 17, fontWeight: '700' },
  status: { color: '#10A37F', fontSize: 13, marginTop: 2 },
  scroll: { padding: 18 },
  row: { flexDirection: 'row', alignItems: 'flex-end', marginBottom: 12 },
  left: { justifyContent: 'flex-start' },
  right: { justifyContent: 'flex-end' },
  botDot: { width: 26, height: 26, borderRadius: 13, backgroundColor: '#10A37F22', alignItems: 'center', justifyContent: 'center', marginRight: 8 },
  bubble: { maxWidth: '80%', borderRadius: 18, paddingVertical: 11, paddingHorizontal: 15 },
  bot: { backgroundColor: '#13201B', borderBottomLeftRadius: 5 },
  me: { backgroundColor: '#10A37F', borderBottomRightRadius: 5 },
  text: { color: '#DCE7E3', fontSize: 15, lineHeight: 21 },
  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, paddingHorizontal: 16, paddingBottom: 10 },
  chip: { backgroundColor: '#13201B', borderRadius: 16, paddingVertical: 9, paddingHorizontal: 14, borderWidth: 1, borderColor: '#1E3A31' },
  chipText: { color: '#7FD9C0', fontSize: 13, fontWeight: '600' },
  composer: { flexDirection: 'row', alignItems: 'center', padding: 16, gap: 12, borderTopWidth: 1, borderTopColor: '#15201C' },
  input: { flex: 1, height: 44, borderRadius: 22, backgroundColor: '#13201B', justifyContent: 'center', paddingHorizontal: 18 },
  placeholder: { color: '#5A6E68', fontSize: 15 },
  send: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#10A37F', alignItems: 'center', justifyContent: 'center' },
});