import 'package:flutter/material.dart';

void main() => runApp(const StudyApp());

class Lesson {
  const Lesson(this.id, this.title, {this.done = false});
  final int id;
  final String title;
  final bool done;
  Lesson withDone(bool value) => Lesson(id, title, done: value);
}

class StudyApp extends StatelessWidget {
  const StudyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    title: '学习记录板',
    theme: ThemeData(colorSchemeSeed: Colors.indigo, useMaterial3: true),
    home: const StudyBoard(),
  );
}

class StudyBoard extends StatefulWidget {
  const StudyBoard({super.key});
  @override
  State<StudyBoard> createState() => _StudyBoardState();
}

class _StudyBoardState extends State<StudyBoard> {
  final _draft = TextEditingController();
  List<Lesson> _lessons = const [
    Lesson(0, 'HTML 表单'),
    Lesson(1, 'CSS 布局', done: true),
  ];
  int _nextId = 2;
  bool _onlyPending = false;
  String? _error;

  void _add() {
    final title = _draft.text.trim();
    if (title.isEmpty) {
      setState(() => _error = '请输入学习内容');
      return;
    }
    setState(() {
      _lessons = [..._lessons, Lesson(_nextId++, title)];
      _error = null;
    });
    _draft.clear();
  }

  void _setDone(int id, bool done) {
    setState(() {
      _lessons = [
        for (final item in _lessons)
          if (item.id == id) item.withDone(done) else item,
      ];
    });
  }

  @override
  void dispose() {
    _draft.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final visible = _lessons.where((item) => !_onlyPending || !item.done).toList();
    return Scaffold(
      appBar: AppBar(title: const Text('学习记录板')),
      body: SafeArea(
        child: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 720),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: TextField(
                          controller: _draft,
                          maxLength: 80,
                          decoration: InputDecoration(labelText: '学习内容', errorText: _error),
                          onSubmitted: (_) => _add(),
                        ),
                      ),
                      const SizedBox(width: 12),
                      FilledButton(onPressed: _add, child: const Text('添加')),
                    ],
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: FilterChip(
                      label: const Text('只看待学'),
                      selected: _onlyPending,
                      onSelected: (value) => setState(() => _onlyPending = value),
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text('显示 ${visible.length} 项'),
                  const SizedBox(height: 8),
                  Expanded(
                    child: visible.isEmpty
                      ? const Center(child: Text('没有匹配的记录'))
                      : ListView.builder(
                          itemCount: visible.length,
                          itemBuilder: (context, index) {
                            final item = visible[index];
                            return CheckboxListTile(
                              key: ValueKey(item.id),
                              title: Text(item.title),
                              subtitle: Text(item.done ? '已学' : '待学'),
                              value: item.done,
                              onChanged: (value) => _setDone(item.id, value ?? false),
                            );
                          },
                        ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}