import 'package:cupertino_ui/cupertino_ui.dart';
import 'package:go_router/go_router.dart';

import '../../../core/widgets/feature_ui.dart';
import '../../../l10n/app_localizations.dart';

/// 联系人页（管理 → 联系人）。
///
/// 对应移动端设计稿：搜索栏 + 分组列表（常用/同事/家人）+ 右侧字母索引。
class ContactsPage extends StatelessWidget {
  const ContactsPage({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context);
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text(l10n.contactsTitle),
        leading: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Icon(CupertinoIcons.back),
          onPressed: () => context.go('/messages'),
        ),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Icon(CupertinoIcons.add, size: 26),
          onPressed: () {},
        ),
      ),
      child: Stack(
        children: [
          ListView(
            padding: const EdgeInsets.only(bottom: 20),
            children: [
              // 搜索栏
              Container(
                margin: const EdgeInsets.fromLTRB(16, 10, 16, 4),
                height: 40,
                decoration: BoxDecoration(
                  color: CupertinoColors.white,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: const [BoxShadow(color: Color(0x14141E3C), blurRadius: 8, offset: Offset(0, 2))],
                ),
                child: const Row(
                  children: [
                    SizedBox(width: 14),
                    Icon(CupertinoIcons.search, size: 16, color: AppColors.sub),
                    SizedBox(width: 8),
                    Text('搜索姓名、号码', style: TextStyle(fontSize: 14, color: AppColors.sub)),
                  ],
                ),
              ),
              _group(l10n.grpFavorite, [
                _Contact('妈', AppColors.blue, '妈妈', '138 **** 6621'),
                _Contact('李', AppColors.green, '李工 · 运维', '159 **** 0248'),
              ]),
              _group(l10n.grpColleague, [
                _Contact('王', AppColors.purple, '王经理', '186 **** 7733 · 产品部'),
                _Contact('张', AppColors.orange, '张总监', '135 **** 5512 · 技术部'),
                _Contact('赵', AppColors.red, '赵设计', '188 **** 2019 · 设计部'),
              ]),
              _group(l10n.grpFamily, [
                _Contact('爸', AppColors.teal, '爸爸', '137 **** 0098'),
                _Contact('妹', const Color(0xFFEC4899), '妹妹', '199 **** 3344'),
              ]),
            ],
          ),
          Positioned(
            right: 5,
            top: 150,
            child: Column(
              children: const [
                Text('★', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
                SizedBox(height: 3),
                Text('同', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
                SizedBox(height: 3),
                Text('家', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
                SizedBox(height: 3),
                Text('A', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
                SizedBox(height: 3),
                Text('B', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
                SizedBox(height: 3),
                Text('C', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
                SizedBox(height: 3),
                Text('D', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w700, color: AppColors.sub)),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _group(String title, List<_Contact> items) => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(18, 14, 18, 4),
            child: Text(title,
                style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w700, color: AppColors.sub)),
          ),
          CardBox(
            padding: EdgeInsets.zero,
            child: Column(
              children: [
                for (var i = 0; i < items.length; i++) ...[
                  if (i > 0) const Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: AppDivider()),
                  _row(items[i]),
                ],
              ],
            ),
          ),
        ],
      );

  Widget _row(_Contact c) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
        child: Row(
          children: [
            Container(
              width: 42,
              height: 42,
              decoration: BoxDecoration(color: c.color, borderRadius: BorderRadius.circular(13)),
              child: Center(child: Text(c.initial, style: const TextStyle(fontSize: 17, color: CupertinoColors.white))),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(c.name, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: AppColors.ink)),
                  Text(c.phone, style: const TextStyle(fontSize: 12, color: AppColors.sub)),
                ],
              ),
            ),
            const Text('›', style: TextStyle(fontSize: 16, color: Color(0xFFCBD2DC))),
          ],
        ),
      );
}

class _Contact {
  const _Contact(this.initial, this.color, this.name, this.phone);
  final String initial;
  final Color color;
  final String name;
  final String phone;
}