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

const PLANTS = [
  { name: 'Monstera', icon: '🌿', days: 0, light: 'Bright indirect' },
  { name: 'Snake plant', icon: '🪴', days: 4, light: 'Low light' },
  { name: 'Fiddle fig', icon: '🌳', days: 1, light: 'Bright' },
  { name: 'Pothos', icon: '🍃', days: 2, light: 'Medium' },
];

export default function App() {
  const [watered, setWatered] = useState<Record<string, boolean>>({});
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <Text style={s.kicker}>YOUR JUNGLE</Text>
        <Text style={s.h1}>4 plants</Text>
        <Text style={s.sub}>1 needs water today</Text>
        {PLANTS.map((p) => {
          const done = watered[p.name] || p.days > 0;
          return (
            <View key={p.name} style={s.card}>
              <View style={s.thumb}><Text style={{ fontSize: 34 }}>{p.icon}</Text></View>
              <View style={{ flex: 1, marginLeft: 16 }}>
                <Text style={s.name}>{p.name}</Text>
                <Text style={s.light}>☀️ {p.light}</Text>
                <Text style={[s.due, { color: done ? '#5CCB6A' : '#FFB020' }]}>{done ? (p.days > 0 ? 'In ' + p.days + ' days' : 'Watered') : 'Water today'}</Text>
              </View>
              {p.days === 0 && (
                <Pressable onPress={() => setWatered((w) => ({ ...w, [p.name]: true }))} style={[s.btn, watered[p.name] && s.btnDone]}>
                  <Text style={s.btnText}>{watered[p.name] ? '✓' : '💧'}</Text>
                </Pressable>
              )}
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#08120A' },
  scroll: { padding: 22, paddingTop: 60 },
  kicker: { color: '#5CCB6A', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  h1: { color: '#fff', fontSize: 32, fontWeight: '800', marginTop: 4 },
  sub: { color: '#7DA886', fontSize: 15, marginTop: 2, marginBottom: 20 },
  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#0E1C11', borderRadius: 20, padding: 16, marginBottom: 14 },
  thumb: { width: 64, height: 64, borderRadius: 18, backgroundColor: '#122516', alignItems: 'center', justifyContent: 'center' },
  name: { color: '#EAF6EC', fontSize: 17, fontWeight: '700' },
  light: { color: '#7DA886', fontSize: 13, marginTop: 4 },
  due: { fontSize: 13, fontWeight: '700', marginTop: 4 },
  btn: { width: 48, height: 48, borderRadius: 24, backgroundColor: '#12331A', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#1E4D29' },
  btnDone: { backgroundColor: '#5CCB6A', borderColor: '#5CCB6A' },
  btnText: { fontSize: 20, color: '#fff' },
});