import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.todoBg,
      body: SafeArea(
        child: Column(
          children: [
            _buildHeader(),
            Expanded(child: _buildContent()),
            _buildBottomDock(context),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return SizedBox(
      height: 72,
      child: Padding(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 14, bottom: 8),
        child: Align(
          alignment: Alignment.centerLeft,
          child: const Text(
            '待办事项',
            style: TextStyle(
              fontFamily: 'Inter',
              fontSize: 22,
              fontWeight: FontWeight.w700,
              color: AppColors.slate900,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildContent() {
    return Padding(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 96),
      child: ListView(
        children: [
          _buildQuadrant(
            title: '重要紧急',
            count: 2,
            textColor: AppColors.g1Text,
            dividerColor: AppColors.g1Divider,
            borderColor: AppColors.g1Border,
            items: ['18:00 前提交活动方案', '回复客户邀约确认'],
          ),
          const SizedBox(height: 12),
          _buildQuadrant(
            title: '紧急不重要',
            count: 2,
            textColor: AppColors.g2Text,
            dividerColor: AppColors.g2Divider,
            borderColor: AppColors.g2Border,
            items: ['确认会场停车信息', '代订明早高铁票'],
          ),
          const SizedBox(height: 12),
          _buildQuadrant(
            title: '重要不紧急',
            count: 3,
            textColor: AppColors.g3Text,
            dividerColor: AppColors.g3Divider,
            borderColor: AppColors.g3Border,
            items: ['本周复盘与下周规划', '整理个人知识库结构', '优化三月目标里程碑'],
          ),
        ],
      ),
    );
  }

  Widget _buildQuadrant({
    required String title,
    required int count,
    required Color textColor,
    required Color dividerColor,
    required Color borderColor,
    required List<String> items,
  }) {
    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(
                '$count项',
                style: TextStyle(
                  fontFamily: 'Inter',
                  fontSize: 12,
                  fontWeight: FontWeight.w700,
                  color: textColor,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Container(height: 1, color: dividerColor),
          const SizedBox(height: 8),
          ...items.map((item) => _buildTodoItem(item)),
        ],
      ),
    );
  }

  Widget _buildTodoItem(String title) {
    return SizedBox(
      height: 42,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontFamily: 'Inter',
              fontSize: 13,
              fontWeight: FontWeight.w600,
              color: AppColors.slate700,
            ),
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  color: AppColors.slate300,
                  shape: BoxShape.circle,
                ),
              ),
              const SizedBox(width: 8),
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  color: AppColors.slate300,
                  shape: BoxShape.circle,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildBottomDock(BuildContext context) {
    return SizedBox(
      height: 61,
      child: Padding(
        padding: const EdgeInsets.only(
          left: 20,
          right: 20,
          top: 12,
          bottom: 18,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              width: 102,
              height: 52,
              padding: const EdgeInsets.symmetric(horizontal: 5),
              decoration: BoxDecoration(
                color: AppColors.todoToggleBg,
                borderRadius: BorderRadius.circular(24),
                border: Border.all(color: AppColors.todoToggleBorder, width: 1),
              ),
              child: Row(
                children: [
                  Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(
                      color: AppColors.todoToggleActiveBg,
                      borderRadius: BorderRadius.circular(18),
                      border: Border.all(
                        color: AppColors.todoToggleActiveBorder,
                        width: 1,
                      ),
                    ),
                    child: const Icon(
                      LucideIcons.listTodo,
                      size: 20,
                      color: AppColors.blue600,
                    ),
                  ),
                  const SizedBox(width: 4),
                  GestureDetector(
                    onTap: () => context.push('/calendar/dayweek'),
                    child: Container(
                      width: 44,
                      height: 44,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(18),
                      ),
                      child: const Icon(
                        LucideIcons.calendar,
                        size: 20,
                        color: AppColors.slate500,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              onTap: () => Navigator.of(context).pop(),
              child: Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: AppColors.todoHomeBtnBg,
                  borderRadius: BorderRadius.circular(18),
                  border: Border.all(
                    color: AppColors.todoHomeBtnBorder,
                    width: 1,
                  ),
                ),
                child: const Icon(
                  LucideIcons.home,
                  size: 20,
                  color: Color(0xFF1E3A8A),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}