social-app/apps/lib/features/contacts/ui/screens/contacts_screen.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/page_header.dart' as widgets;

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

  @override
  State<ContactsScreen> createState() => _ContactsScreenState();
}

class _ContactsScreenState extends State<ContactsScreen> {
  final _searchController = TextEditingController();

  final List<ContactItem> _recentContacts = [
    ContactItem(
      name: 'Toki',
      email: 'toki@xunmee.com',
      color: AppColors.blue500,
    ),
    ContactItem(
      name: 'Mina',
      email: 'mina@xunmee.com',
      color: AppColors.violet600,
    ),
  ];

  final List<ContactItem> _allContacts = [
    ContactItem(name: 'Aki', email: 'aki@xunmee.com', color: AppColors.blue600),
    ContactItem(
      name: 'Lynn',
      email: 'lynn@xunmee.com',
      color: const Color(0xFF0EA5E9),
    ),
    ContactItem(
      name: 'Nora',
      email: 'nora@xunmee.com',
      color: AppColors.violet500,
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8FAFC),
      body: SafeArea(
        child: Column(
          children: [
            widgets.PageHeader(leading: widgets.BackButton()),
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildSearchRow(),
                    const SizedBox(height: 16),
                    _buildSectionTitle('最近联系'),
                    const SizedBox(height: 8),
                    _buildContactCard(_recentContacts),
                    const SizedBox(height: 16),
                    _buildSectionTitle('全部联系人'),
                    const SizedBox(height: 8),
                    _buildContactCard(_allContacts),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchRow() {
    return Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {},
            child: Container(
              height: 40,
              padding: const EdgeInsets.symmetric(horizontal: 12),
              decoration: BoxDecoration(
                color: const Color(0xFFF8FAFF),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: const Color(0xFFE4EBF7)),
              ),
              child: Row(
                children: [
                  const Icon(Icons.search, size: 16, color: AppColors.slate400),
                  const SizedBox(width: 8),
                  Text(
                    '搜索联系人',
                    style: TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.w500,
                      color: AppColors.slate400,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        const SizedBox(width: 10),
        GestureDetector(
          onTap: () => context.push('/contacts/add'),
          child: Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: const Color(0xFFF1F7FF),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(color: const Color(0xFFD7E6FF)),
            ),
            child: const Icon(
              Icons.person_add,
              size: 16,
              color: AppColors.blue500,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        fontSize: 13,
        fontWeight: FontWeight.w600,
        color: AppColors.slate500,
      ),
    );
  }

  Widget _buildContactCard(List<ContactItem> contacts) {
    return Container(
      decoration: BoxDecoration(
        color: AppColors.white,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: const Color(0xFFE3EAF6)),
      ),
      child: Column(
        children: [
          for (int i = 0; i < contacts.length; i++) ...[
            _buildContactItem(contacts[i]),
            if (i < contacts.length - 1)
              Container(
                height: 1,
                margin: const EdgeInsets.symmetric(horizontal: 14),
                color: const Color(0xFFEEF2F7),
              ),
          ],
        ],
      ),
    );
  }

  Widget _buildContactItem(ContactItem contact) {
    return GestureDetector(
      onTap: () => context.push('/contacts/add?id=${contact.email}'),
      child: Container(
        height: 70,
        padding: const EdgeInsets.symmetric(horizontal: 14),
        child: Row(
          children: [
            Container(
              width: 42,
              height: 42,
              decoration: BoxDecoration(
                color: _getAvatarBackground(contact.color),
                borderRadius: BorderRadius.circular(21),
                border: Border.all(color: _getAvatarBorder(contact.color)),
              ),
              child: Icon(Icons.person, size: 18, color: contact.color),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    contact.name,
                    style: const TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w600,
                      color: AppColors.slate900,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    contact.email,
                    style: const TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                      color: AppColors.slate500,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Color _getAvatarBackground(Color color) {
    if (color == AppColors.blue500) return const Color(0xFFEEF4FF);
    if (color == AppColors.violet600) return const Color(0xFFF3F7FF);
    if (color == AppColors.blue600) return const Color(0xFFEDF5FF);
    if (color == const Color(0xFF0EA5E9)) return const Color(0xFFF2F8FF);
    if (color == AppColors.violet500) return const Color(0xFFF5F7FF);
    return const Color(0xFFEEF4FF);
  }

  Color _getAvatarBorder(Color color) {
    if (color == AppColors.blue500) return const Color(0xFFDDE8FB);
    if (color == AppColors.violet600) return const Color(0xFFE2EAFB);
    if (color == AppColors.blue600) return const Color(0xFFDCE9FB);
    if (color == const Color(0xFF0EA5E9)) return const Color(0xFFDFEAFA);
    if (color == AppColors.violet500) return const Color(0xFFE4E8FA);
    return const Color(0xFFDDE8FB);
  }
}

class ContactItem {
  final String name;
  final String email;
  final Color color;

  ContactItem({required this.name, required this.email, required this.color});
}