social-app/apps/lib/features/todo/ui/screens/todo_quadrants_screen.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/di/injection.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/app_loading_indicator.dart';
import '../../../../shared/widgets/app_pull_refresh_feedback.dart';
import '../../../../shared/widgets/app_pressable.dart';
import '../../../../shared/widgets/app_sheet_input_field.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../../calendar/data/calendar_api.dart';
import '../../../calendar/ui/calendar_state_manager.dart';
import '../../../calendar/ui/widgets/bottom_dock.dart';
import '../../data/todo_api.dart';

class TodoQuadrantsScreen extends StatefulWidget {
  const TodoQuadrantsScreen({super.key});

  @override
  State<TodoQuadrantsScreen> createState() => _TodoQuadrantsScreenState();
}

class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
  final TodoApi _todoApi = sl<TodoApi>();

  List<TodoResponse> _todos = [];
  bool _isLoading = true;
  bool _isPullRefreshing = false;
  bool _loadingTodosRequest = false;
  String? _error;

  @override
  void initState() {
    super.initState();
    _loadTodos();
  }

  Future<void> _loadTodos({bool showPageLoader = true}) async {
    if (_loadingTodosRequest || _isPullRefreshing) {
      return;
    }
    _loadingTodosRequest = true;

    setState(() {
      if (showPageLoader) {
        _isLoading = true;
        _error = null;
      } else {
        _isPullRefreshing = true;
      }
    });

    try {
      final todos = await _todoApi.getTodos(status: 'pending');
      if (!mounted) {
        return;
      }
      setState(() {
        _todos = todos;
        _isLoading = false;
        _isPullRefreshing = false;
        _error = null;
      });
    } catch (e) {
      if (!mounted) {
        return;
      }
      if (showPageLoader) {
        setState(() {
          _error = e.toString();
          _isLoading = false;
          _isPullRefreshing = false;
        });
      } else {
        setState(() => _isPullRefreshing = false);
        Toast.show(context, '刷新失败，请稍后重试', type: ToastType.error);
      }
    } finally {
      _loadingTodosRequest = false;
    }
  }

  Future<void> _onPullRefresh() async {
    await _loadTodos(showPageLoader: false);
  }

  List<TodoResponse> get _importantUrgent =>
      _todos.where((t) => t.priority == 1).toList();

  List<TodoResponse> get _urgentNotImportant =>
      _todos.where((t) => t.priority == 3).toList();

  List<TodoResponse> get _importantNotUrgent =>
      _todos.where((t) => t.priority == 2).toList();

  Future<void> _completeTodo(TodoResponse todo) async {
    try {
      await _todoApi.completeTodo(todo.id);
      if (mounted) {
        Toast.show(context, '已完成', type: ToastType.success);
      }
      try {
        await _loadTodos();
      } catch (_) {
        // ignore reload error
      }
    } catch (e) {
      if (mounted) {
        Toast.show(context, '完成失败: $e', type: ToastType.error);
      }
    }
  }

  void _navigateToDetail(TodoResponse todo) {
    context.push('/todo/${todo.id}');
  }

  Future<void> _addTodo() async {
    final result = await showModalBottomSheet<Map<String, dynamic>>(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => const _AddTodoSheet(),
    );

    if (result != null) {
      try {
        await _todoApi.createTodo(
          title: result['title'] as String,
          description: result['description'] as String?,
          priority: result['priority'] as int,
          scheduleItemIds: (result['schedule_item_ids'] as List<String>?) ?? [],
        );
        await _loadTodos();
      } catch (e) {
        if (mounted) {
          Toast.show(context, '创建失败: $e', type: ToastType.error);
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.todoBg,
      body: PopScope(
        canPop: false,
        onPopInvokedWithResult: (didPop, result) {
          if (!didPop) {
            context.go('/home');
          }
        },
        child: SafeArea(
          child: Column(
            children: [
              _buildHeader(),
              Expanded(child: _buildContent()),
              _buildBottomDock(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return SizedBox(
      height: 72,
      child: Padding(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 14, bottom: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text(
              '待办事项',
              style: TextStyle(
                fontFamily: 'Inter',
                fontSize: 22,
                fontWeight: FontWeight.w700,
                color: AppColors.slate900,
              ),
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                AppPressable(
                  borderRadius: BorderRadius.circular(AppRadius.full),
                  onTap: _loadTodos,
                  child: Container(
                    width: 36,
                    height: 36,
                    decoration: BoxDecoration(
                      color: AppColors.messageBtnWrap,
                      borderRadius: BorderRadius.circular(AppRadius.full),
                      border: Border.all(color: AppColors.messageBtnBorder),
                    ),
                    child: const Icon(
                      LucideIcons.refreshCcw,
                      size: 18,
                      color: AppColors.slate600,
                    ),
                  ),
                ),
                const SizedBox(width: AppSpacing.sm),
                AppPressable(
                  borderRadius: BorderRadius.circular(AppRadius.full),
                  onTap: _addTodo,
                  child: Container(
                    width: 36,
                    height: 36,
                    decoration: BoxDecoration(
                      color: AppColors.blue600,
                      borderRadius: BorderRadius.circular(AppRadius.full),
                      boxShadow: [
                        BoxShadow(
                          color: AppColors.blue300.withValues(alpha: 0.28),
                          blurRadius: AppRadius.lg,
                          offset: const Offset(0, AppSpacing.xs),
                        ),
                      ],
                    ),
                    child: const Icon(
                      LucideIcons.plus,
                      size: 18,
                      color: AppColors.white,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildContent() {
    if (_isLoading) {
      return const Center(child: AppLoadingIndicator(size: 22));
    }

    if (_error != null) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('加载失败: $_error', style: const TextStyle(color: Colors.red)),
            const SizedBox(height: 16),
            AppButton(text: '重试', onPressed: _loadTodos),
          ],
        ),
      );
    }

    return Stack(
      children: [
        RefreshIndicator.noSpinner(
          onRefresh: _onPullRefresh,
          child: Padding(
            padding: const EdgeInsets.only(
              left: 16,
              right: 16,
              top: 4,
              bottom: 96,
            ),
            child: ListView(
              children: [
                _buildQuadrant(
                  title: '重要紧急',
                  textColor: AppColors.g1Text,
                  dividerColor: AppColors.g1Divider,
                  borderColor: AppColors.g1Border,
                  items: _importantUrgent,
                  onComplete: _completeTodo,
                  onTap: _navigateToDetail,
                ),
                const SizedBox(height: 12),
                _buildQuadrant(
                  title: '紧急不重要',
                  textColor: AppColors.g2Text,
                  dividerColor: AppColors.g2Divider,
                  borderColor: AppColors.g2Border,
                  items: _urgentNotImportant,
                  onComplete: _completeTodo,
                  onTap: _navigateToDetail,
                ),
                const SizedBox(height: 12),
                _buildQuadrant(
                  title: '重要不紧急',
                  textColor: AppColors.g3Text,
                  dividerColor: AppColors.g3Divider,
                  borderColor: AppColors.g3Border,
                  items: _importantNotUrgent,
                  onComplete: _completeTodo,
                  onTap: _navigateToDetail,
                ),
              ],
            ),
          ),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: AppPullRefreshFeedback(visible: _isPullRefreshing),
        ),
      ],
    );
  }

  Widget _buildQuadrant({
    required String title,
    required Color textColor,
    required Color dividerColor,
    required Color borderColor,
    required List<TodoResponse> items,
    required Future<void> Function(TodoResponse) onComplete,
    required void Function(TodoResponse) onTap,
  }) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: AppColors.todoCardBg,
        borderRadius: BorderRadius.circular(14),
        border: Border.all(color: borderColor, width: 1),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontFamily: 'Inter',
                  fontSize: 15,
                  fontWeight: FontWeight.w700,
                  color: textColor,
                ),
              ),
              Text(
                '${items.length}项',
                style: TextStyle(
                  fontFamily: 'Inter',
                  fontSize: 12,
                  fontWeight: FontWeight.w700,
                  color: textColor,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Container(height: 1, color: dividerColor),
          const SizedBox(height: 8),
          if (items.isEmpty)
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 16),
              child: Center(
                child: Text(
                  '暂无待办',
                  style: TextStyle(
                    fontFamily: 'Inter',
                    fontSize: 13,
                    color: AppColors.slate400,
                  ),
                ),
              ),
            )
          else
            ...items.map(
              (item) => _TodoItemWidget(
                item: item,
                onComplete: () => onComplete(item),
                onTap: () => onTap(item),
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildBottomDock() {
    return BottomDock(
      activeTab: DockTab.todo,
      onTodoTap: () {},
      onCalendarTap: () {
        final manager = sl<CalendarStateManager>();
        final viewType = manager.viewType;
        final date = manager.selectedDate;
        final dateStr =
            '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
        if (viewType == CalendarViewType.month) {
          context.push('/calendar/month');
        } else {
          context.push('/calendar/dayweek?date=$dateStr');
        }
      },
      onHomeTap: () => context.go('/home'),
    );
  }
}

class _TodoItemWidget extends StatefulWidget {
  final TodoResponse item;
  final VoidCallback onComplete;
  final VoidCallback onTap;

  const _TodoItemWidget({
    required this.item,
    required this.onComplete,
    required this.onTap,
  });

  @override
  State<_TodoItemWidget> createState() => _TodoItemWidgetState();
}

class _TodoItemWidgetState extends State<_TodoItemWidget>
    with SingleTickerProviderStateMixin {
  bool _isChecked = false;
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 200),
      vsync: this,
    );
    _scaleAnimation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOutBack));
  }

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

  void _handleCheckTap() async {
    if (_isChecked) return;

    setState(() {
      _isChecked = true;
    });
    _controller.forward().then((_) {
      widget.onComplete();
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: SizedBox(
        height: 42,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Text(
                widget.item.title,
                style: const TextStyle(
                  fontFamily: 'Inter',
                  fontSize: 13,
                  fontWeight: FontWeight.w600,
                  color: AppColors.slate700,
                ),
              ),
            ),
            GestureDetector(
              onTap: _handleCheckTap,
              child: AnimatedBuilder(
                animation: _controller,
                builder: (context, child) {
                  return Container(
                    width: 20,
                    height: 20,
                    decoration: BoxDecoration(
                      color: _isChecked ? AppColors.blue600 : Colors.white,
                      border: Border.all(
                        color: _isChecked
                            ? AppColors.blue600
                            : AppColors.slate300,
                        width: 1.5,
                      ),
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: _isChecked
                        ? Transform.scale(
                            scale: _scaleAnimation.value,
                            child: const Icon(
                              Icons.check,
                              size: 14,
                              color: Colors.white,
                            ),
                          )
                        : null,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _AddTodoSheet extends StatefulWidget {
  const _AddTodoSheet();

  @override
  State<_AddTodoSheet> createState() => _AddTodoSheetState();
}

class _AddTodoSheetState extends State<_AddTodoSheet> {
  final _titleController = TextEditingController();
  final _descriptionController = TextEditingController();
  int _priority = 1;
  final Set<String> _selectedScheduleItems = {};
  late final Future<List<_ScheduleItemSimple>> _scheduleItemsFuture;

  @override
  void initState() {
    super.initState();
    _scheduleItemsFuture = _loadScheduleItems();
  }

  @override
  void dispose() {
    _titleController.dispose();
    _descriptionController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;

    return AnimatedPadding(
      duration: const Duration(milliseconds: 150),
      curve: Curves.easeOut,
      padding: EdgeInsets.only(bottom: bottomInset),
      child: Container(
        height: MediaQuery.of(context).size.height * 0.85,
        decoration: const BoxDecoration(
          color: AppColors.white,
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(AppRadius.xxl),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SizedBox(height: AppSpacing.sm),
            Center(
              child: Container(
                width: 36,
                height: 4,
                decoration: BoxDecoration(
                  color: AppColors.slate200,
                  borderRadius: BorderRadius.circular(AppRadius.full),
                ),
              ),
            ),
            const SizedBox(height: AppSpacing.md),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: AppSpacing.xl),
              child: Text(
                '添加待办',
                style: TextStyle(
                  fontFamily: 'Inter',
                  fontSize: 20,
                  fontWeight: FontWeight.w700,
                  color: AppColors.slate900,
                ),
              ),
            ),
            const SizedBox(height: AppSpacing.lg),
            Expanded(
              child: SingleChildScrollView(
                keyboardDismissBehavior:
                    ScrollViewKeyboardDismissBehavior.onDrag,
                padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildInputField(
                      controller: _titleController,
                      label: '标题',
                      hint: '输入待办标题',
                      autofocus: true,
                    ),
                    const SizedBox(height: AppSpacing.lg),
                    _buildInputField(
                      controller: _descriptionController,
                      label: '描述（可选）',
                      hint: '补充细节或备注',
                      maxLines: 2,
                    ),
                    const SizedBox(height: AppSpacing.lg),
                    const Text(
                      '优先级',
                      style: TextStyle(
                        fontFamily: 'Inter',
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: AppColors.slate700,
                      ),
                    ),
                    const SizedBox(height: AppSpacing.sm),
                    Wrap(
                      spacing: AppSpacing.sm,
                      runSpacing: AppSpacing.sm,
                      children: [
                        _PriorityChip(
                          label: '重要紧急',
                          selected: _priority == 1,
                          color: AppColors.g1Border,
                          onTap: () => setState(() => _priority = 1),
                        ),
                        _PriorityChip(
                          label: '紧急不重要',
                          selected: _priority == 3,
                          color: AppColors.g2Border,
                          onTap: () => setState(() => _priority = 3),
                        ),
                        _PriorityChip(
                          label: '重要不紧急',
                          selected: _priority == 2,
                          color: AppColors.g3Border,
                          onTap: () => setState(() => _priority = 2),
                        ),
                      ],
                    ),
                    const SizedBox(height: AppSpacing.lg),
                    const Text(
                      '关联日历事件',
                      style: TextStyle(
                        fontFamily: 'Inter',
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        color: AppColors.slate700,
                      ),
                    ),
                    const SizedBox(height: AppSpacing.sm),
                    Container(
                      constraints: const BoxConstraints(maxHeight: 260),
                      decoration: BoxDecoration(
                        color: AppColors.slate50,
                        borderRadius: BorderRadius.circular(AppRadius.lg),
                        border: Border.all(color: AppColors.borderSecondary),
                      ),
                      child: FutureBuilder<List<_ScheduleItemSimple>>(
                        future: _scheduleItemsFuture,
                        builder: (context, snapshot) {
                          if (snapshot.connectionState ==
                              ConnectionState.waiting) {
                            return _buildScheduleSkeleton();
                          }
                          if (snapshot.hasError) {
                            return Padding(
                              padding: const EdgeInsets.all(AppSpacing.lg),
                              child: Text(
                                '加载失败: ${snapshot.error}',
                                style: const TextStyle(color: AppColors.red500),
                              ),
                            );
                          }
                          final items = snapshot.data ?? const [];
                          if (items.isEmpty) {
                            return const SizedBox(
                              height: 120,
                              child: Center(
                                child: Text(
                                  '暂无日历事件',
                                  style: TextStyle(color: AppColors.slate500),
                                ),
                              ),
                            );
                          }
                          return ListView.builder(
                            padding: const EdgeInsets.symmetric(
                              horizontal: AppSpacing.sm,
                              vertical: AppSpacing.xs,
                            ),
                            itemCount: items.length,
                            itemBuilder: (context, index) {
                              final item = items[index];
                              final isSelected = _selectedScheduleItems
                                  .contains(item.id);
                              return CheckboxListTile(
                                dense: true,
                                value: isSelected,
                                title: Text(item.title),
                                subtitle: Text(_formatDate(item.startAt)),
                                onChanged: (value) {
                                  setState(() {
                                    if (value == true) {
                                      _selectedScheduleItems.add(item.id);
                                    } else {
                                      _selectedScheduleItems.remove(item.id);
                                    }
                                  });
                                },
                              );
                            },
                          );
                        },
                      ),
                    ),
                    const SizedBox(height: AppSpacing.xl),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(
                AppSpacing.lg,
                AppSpacing.sm,
                AppSpacing.lg,
                AppSpacing.lg,
              ),
              child: SizedBox(
                width: double.infinity,
                child: AppButton(
                  text: '添加',
                  onPressed: () {
                    if (_titleController.text.trim().isEmpty) {
                      Toast.show(context, '请输入标题', type: ToastType.warning);
                      return;
                    }
                    Navigator.of(context).pop({
                      'title': _titleController.text.trim(),
                      'description': _descriptionController.text.trim().isEmpty
                          ? null
                          : _descriptionController.text.trim(),
                      'priority': _priority,
                      'schedule_item_ids': _selectedScheduleItems.toList(),
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildInputField({
    required TextEditingController controller,
    required String label,
    required String hint,
    int maxLines = 1,
    bool autofocus = false,
  }) {
    return AppSheetInputField(
      controller: controller,
      label: label,
      hint: hint,
      maxLines: maxLines,
      autofocus: autofocus,
    );
  }

  Widget _buildScheduleSkeleton() {
    return ListView.separated(
      physics: const NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.symmetric(
        horizontal: AppSpacing.md,
        vertical: AppSpacing.md,
      ),
      itemCount: 4,
      separatorBuilder: (context, index) =>
          const SizedBox(height: AppSpacing.sm),
      itemBuilder: (context, index) {
        return Container(
          height: AppSpacing.xxl + AppSpacing.lg,
          decoration: BoxDecoration(
            color: AppColors.white,
            borderRadius: BorderRadius.circular(AppRadius.md),
            border: Border.all(color: AppColors.borderSecondary),
          ),
        );
      },
    );
  }

  Future<List<_ScheduleItemSimple>> _loadScheduleItems() async {
    final calendarApi = sl<CalendarApi>();
    final now = DateTime.now();
    final start = now.subtract(const Duration(days: 30));
    final end = now.add(const Duration(days: 90));
    final items = await calendarApi.listByRange(startAt: start, endAt: end);
    return items
        .map(
          (e) =>
              _ScheduleItemSimple(id: e.id, title: e.title, startAt: e.startAt),
        )
        .toList();
  }

  String _formatDate(DateTime dt) {
    return '${dt.year}年${dt.month}月${dt.day}日 ${dt.hour.toString().padLeft(2, '0')}:${dt.minute.toString().padLeft(2, '0')}';
  }
}

class _ScheduleItemSimple {
  final String id;
  final String title;
  final DateTime startAt;

  _ScheduleItemSimple({
    required this.id,
    required this.title,
    required this.startAt,
  });
}

class _PriorityChip extends StatelessWidget {
  final String label;
  final bool selected;
  final Color color;
  final VoidCallback onTap;

  const _PriorityChip({
    required this.label,
    required this.selected,
    required this.color,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        decoration: BoxDecoration(
          color: selected ? color.withValues(alpha: 0.2) : Colors.transparent,
          border: Border.all(
            color: selected ? color : AppColors.slate300,
            width: selected ? 2 : 1,
          ),
          borderRadius: BorderRadius.circular(20),
        ),
        child: Text(
          label,
          style: TextStyle(
            fontFamily: 'Inter',
            fontSize: 12,
            fontWeight: selected ? FontWeight.w600 : FontWeight.normal,
            color: selected ? color : AppColors.slate600,
          ),
        ),
      ),
    );
  }
}