// Навчальний приклад редакції Вайб-Кодинг. Дані живуть лише до перезавантаження.
import React, { useRef, useState } from 'react';
import { View, Text, TextInput, Pressable, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';

export function addItem(items, rawTitle, id) {
  const title = String(rawTitle).trim().slice(0, 120);
  return title ? [...items, { id, title, done: false }] : items;
}
export function toggleItem(items, id) {
  return items.map(item => item.id === id ? { ...item, done: !item.done } : item);
}
export function removeItem(items, id) {
  return items.filter(item => item.id !== id);
}

export default function App() {
  const [items, setItems] = useState([]);
  const [title, setTitle] = useState('');
  const nextId = useRef(0);
  const add = () => {
    if (!title.trim()) return;
    const id = String(++nextId.current);
    setItems(current => addItem(current, title, id));
    setTitle('');
  };
  return (
    <KeyboardAvoidingView style={s.page} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
      <View style={s.body}>
        <Text style={s.h1}>Мій список покупок</Text>
        <Text style={s.note}>Навчальна версія: після перезапуску список очиститься.</Text>
        <Text style={s.label}>Назва товару</Text>
        <TextInput value={title} onChangeText={setTitle} maxLength={120} onSubmitEditing={add}
          accessibilityLabel="Назва товару" placeholder="Наприклад, яблука" placeholderTextColor="#b9c8dd" style={s.input} />
        <Pressable onPress={add} disabled={!title.trim()} accessibilityRole="button" style={[s.add, !title.trim() && s.disabled]}>
          <Text style={s.addText}>Додати до списку</Text>
        </Pressable>
        <FlatList data={items} keyExtractor={item => item.id} keyboardShouldPersistTaps="handled"
          ListEmptyComponent={<Text style={s.note}>Поки порожньо. Додай першу покупку.</Text>}
          renderItem={({item}) => (
            <View style={s.row}>
              <Text style={[s.item, item.done && s.done]}>{item.title}</Text>
              <View style={s.actions}>
                <Pressable accessibilityRole="checkbox" accessibilityState={{checked:item.done}}
                  accessibilityLabel={'Куплено: ' + item.title} style={s.button}
                  onPress={() => setItems(current => toggleItem(current, item.id))}>
                  <Text style={s.buttonText}>{item.done ? '✓ Куплено' : 'Позначити'}</Text>
                </Pressable>
                <Pressable accessibilityRole="button" accessibilityLabel={'Видалити: ' + item.title}
                  style={s.button} onPress={() => setItems(current => removeItem(current, item.id))}>
                  <Text style={s.buttonText}>Видалити</Text>
                </Pressable>
              </View>
            </View>
          )} />
      </View>
    </KeyboardAvoidingView>
  );
}
const s = StyleSheet.create({
  page:{flex:1,backgroundColor:'#0e192b'},body:{flex:1,padding:20,paddingTop:60},
  h1:{fontSize:28,fontWeight:'700',color:'#edf3fb'},note:{fontSize:16,lineHeight:24,color:'#b9c8dd',marginVertical:16},
  label:{fontSize:16,color:'#edf3fb',marginBottom:8},input:{minHeight:50,borderWidth:1,borderColor:'#a7e7df',borderRadius:12,padding:12,color:'#edf3fb',fontSize:18},
  add:{minHeight:48,padding:12,borderRadius:12,backgroundColor:'#a7e7df',alignItems:'center',justifyContent:'center',marginVertical:12},
  addText:{color:'#0e192b',fontSize:17,fontWeight:'700'},disabled:{opacity:0.45},
  row:{paddingVertical:14,borderBottomWidth:1,borderColor:'#30435f'},item:{fontSize:20,color:'#edf3fb',flexShrink:1},done:{textDecorationLine:'line-through',color:'#b9c8dd'},
  actions:{flexDirection:'row',flexWrap:'wrap',gap:8,marginTop:8},button:{minHeight:48,paddingHorizontal:12,justifyContent:'center',borderWidth:1,borderColor:'#a7e7df',borderRadius:10},
  buttonText:{color:'#a7e7df',fontSize:16}
});