import { useRef, useState } from "react";
import { FlatList, KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
type Lesson = { id: string; title: string; done: boolean };
export default function App() {
  const [lessons, setLessons] = useState<Lesson[]>([
    { id: "html", title: "HTML 表单", done: false },
    { id: "css", title: "CSS 布局", done: true },
  ]);
  const [draft, setDraft] = useState("");
  const [onlyPending, setOnlyPending] = useState(false);
  const [error, setError] = useState("");
  const nextId = useRef(1);
  const visible = lessons.filter(item => !onlyPending || !item.done);
  function add() {
    const title = draft.trim();
    if (!title) { setError("请输入学习内容"); return; }
    const id = "new-" + nextId.current++;
    setLessons(current => [...current, { id, title, done: false }]);
    setDraft("");
    setError("");
  }
  function toggle(id: string) {
    setLessons(current => current.map(item =>
      item.id === id ? { ...item, done: !item.done } : item));
  }
  return <SafeAreaProvider><SafeAreaView style={styles.safe}>
    <KeyboardAvoidingView style={styles.page} behavior={Platform.OS === "ios" ? "padding" : undefined}>
      <Text style={styles.title} accessibilityRole="header">学习记录板</Text>
      <Text nativeID="draft-label">学习内容</Text>
      <TextInput style={styles.input} value={draft} onChangeText={setDraft}
        accessibilityLabel="学习内容" maxLength={80}
        onSubmitEditing={add} returnKeyType="done" />
      <Pressable style={styles.button} accessibilityRole="button" onPress={add}><Text>添加</Text></Pressable>
      {error ? <Text accessibilityRole="alert" accessibilityLiveRegion="polite" style={styles.error}>{error}</Text> : null}
      <Pressable style={styles.button} accessibilityRole="checkbox"
        accessibilityState={{ checked: onlyPending }} onPress={() => setOnlyPending(value => !value)}>
        <Text>{onlyPending ? "已启用：" : "未启用："}只看待学</Text>
      </Pressable>
      <Text>显示 {visible.length} 项</Text>
      <FlatList data={visible} keyExtractor={item => item.id}
        keyboardShouldPersistTaps="handled"
        ListEmptyComponent={<Text>没有匹配的记录</Text>}
        renderItem={({ item }) => <Pressable style={styles.item} accessibilityRole="checkbox"
          accessibilityState={{ checked: item.done }} onPress={() => toggle(item.id)}>
          <Text>{item.done ? "已学：" : "待学："}{item.title}</Text>
        </Pressable>} />
      <View><Text>数据只保存在本次运行中</Text></View>
    </KeyboardAvoidingView>
  </SafeAreaView></SafeAreaProvider>;
}
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#fafafa" },
  page: { flex: 1, padding: 20, gap: 12, width: "100%", maxWidth: 720, alignSelf: "center" },
  title: { fontSize: 24, fontWeight: "600" },
  input: { borderWidth: 1, borderColor: "#777", borderRadius: 4, padding: 12, fontSize: 16 },
  button: { minHeight: 48, padding: 12, backgroundColor: "#e4e8f3", justifyContent: "center" },
  item: { minHeight: 48, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: "#ddd" },
  error: { color: "#a11a26" },
});