import 'package:flutter/material.dart';
import 'package:dating_touchme_app/generated/assets.dart';

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

  @override
  State<ConversationTab> createState() => _ConversationTabState();
}

class _ConversationTabState extends State<ConversationTab> with AutomaticKeepAliveClientMixin {
  // 模拟数据 - 顶部推荐用户列表
  final List<Map<String, dynamic>> _recommendedUsers = [
    {"id": 1, "avatar": Assets.imagesAvatarsExample, "type": "相亲"},
    {"id": 2, "avatar": Assets.imagesAvatarsExample, "type": "交友"},
    {"id": 3, "avatar": Assets.imagesAvatarsExample, "type": "相亲"},
    {"id": 4, "avatar": Assets.imagesAvatarsExample, "type": "相亲"},
    {"id": 5, "avatar": Assets.imagesAvatarsExample, "type": "相亲"},
    {"id": 6, "avatar": Assets.imagesAvatarsExample, "type": "相亲"},
  ];

  // 模拟数据 - 聊天列表
  final List<Map<String, dynamic>> _chatList = [
    {
      "id": 1,
      "name": "系统通知",
      "avatar": Assets.imagesVerifiedIcon,
      "message": "在干嘛",
      "time": "19:24",
      "unreadCount": 2,
    },
    {
      "id": 2,
      "name": "林园园",
      "avatar": Assets.imagesAvatarsExample,
      "message": "在干嘛",
      "time": "19:24",
      "unreadCount": 2,
      "isOnline": true,
    },
    {
      "id": 3,
      "name": "李晖",
      "avatar": Assets.imagesAvatarsExample,
      "message": "好的",
      "time": "19:24",
      "unreadCount": 0,
    },
    {
      "id": 4,
      "name": "李哲",
      "avatar": Assets.imagesAvatarsExample,
      "message": "在干嘛",
      "time": "19:24",
      "unreadCount": 0,
    },
    {
      "id": 5,
      "name": "李夏",
      "avatar": Assets.imagesAvatarsExample,
      "message": "在干嘛",
      "time": "19:24",
      "unreadCount": 0,
    },
  ];

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        // 推荐用户横向滚动列表
        _buildRecommendedUsers(),
        // 聊天列表
        Expanded(
          child: ListView.builder(
            padding: const EdgeInsets.only(top: 8),
            itemCount: _chatList.length,
            itemBuilder: (context, index) {
              final chat = _chatList[index];
              return _buildChatItem(chat);
            },
          ),
        ),
      ],
    );
  }

  // 构建推荐用户横向滚动列表
  Widget _buildRecommendedUsers() {
    return SizedBox(
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        itemCount: _recommendedUsers.length,
        itemBuilder: (context, index) {
          final user = _recommendedUsers[index];
          final bool isSelected = index == 1; // 模拟选中状态

          return Container(
            margin: const EdgeInsets.only(right: 12),
            child: Column(
              children: [
                Stack(
                  children: [
                    Container(
                      width: 60,
                      height: 60,
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: isSelected ? Colors.blue : Colors.transparent,
                          width: 2,
                        ),
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(30),
                        child: Image.asset(user["avatar"], fit: BoxFit.cover),
                      ),
                    ),
                    if (user["type"] == "交友")
                      Positioned(
                        bottom: 0,
                        right: 0,
                        child: Container(
                          width: 20,
                          height: 20,
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: const Icon(
                            Icons.people,
                            size: 12,
                            color: Colors.white,
                          ),
                        ),
                      ),
                  ],
                ),
                const SizedBox(height: 4),
                Text(user["type"], style: const TextStyle(color: Colors.white)),
              ],
            ),
          );
        },
      ),
    );
  }

  // 构建聊天项
  Widget _buildChatItem(Map<String, dynamic> chat) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: [
          // 头像
          Stack(
            children: [
              Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(25),
                  child: Image.asset(chat["avatar"], fit: BoxFit.cover),
                ),
              ),
              if (chat["isOnline"] == true)
                Positioned(
                  bottom: 0,
                  right: 0,
                  child: Container(
                    width: 12,
                    height: 12,
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(6),
                      border: Border.all(color: Colors.white, width: 2),
                    ),
                  ),
                ),
            ],
          ),

          // 信息
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(left: 12),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        chat["name"],
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(
                        chat["time"],
                        style: const TextStyle(
                          color: Colors.grey,
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Text(
                    chat["message"],
                    style: const TextStyle(color: Colors.grey),
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ),

          // 未读消息数
          if (chat["unreadCount"] > 0)
            Container(
              width: 18,
              height: 18,
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(9),
              ),
              alignment: Alignment.center,
              child: Text(
                chat["unreadCount"].toString(),
                style: const TextStyle(color: Colors.white, fontSize: 12),
              ),
            ),
        ],
      ),
    );
  }
  
  @override
  bool get wantKeepAlive => true;
}