import 'package:flutter/material.dart';

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

  @override
  State<FriendsScreen> createState() => _FriendsScreenState();
}

class _FriendsScreenState extends State<FriendsScreen> {
  final List<Map<String, dynamic>> _followingUsers = [
    {'name': '林阿姨', 'avatar': 3, 'isFollowing': true},
    {'name': '黄叔叔', 'avatar': 7, 'isFollowing': true},
    {'name': '周老师', 'avatar': 12, 'isFollowing': true},
    {'name': '何姐', 'avatar': 18, 'isFollowing': true},
    {'name': '苏大哥', 'avatar': 24, 'isFollowing': false},
    {'name': '陶阿姨', 'avatar': 31, 'isFollowing': true},
  ];

  final List<Map<String, dynamic>> _fansUsers = [
    {'name': '白阿姨', 'avatar': 5, 'isFollowing': false},
    {'name': '邓叔', 'avatar': 14, 'isFollowing': true},
    {'name': '贺老师', 'avatar': 19, 'isFollowing': false},
    {'name': '任姐', 'avatar': 26, 'isFollowing': true},
    {'name': '罗阿姨', 'avatar': 38, 'isFollowing': false},
    {'name': '章叔叔', 'avatar': 46, 'isFollowing': true},
  ];

  void _toggleFollow(List<Map<String, dynamic>> users, int index) {
    setState(() {
      users[index]['isFollowing'] = !(users[index]['isFollowing'] as bool);
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: const Color(0xFFFFF8F0),
        appBar: AppBar(
          title: const Text('好友'),
          bottom: const TabBar(
            labelColor: Color(0xFFFF8A3D),
            unselectedLabelColor: Color(0xFF999999),
            indicatorColor: Color(0xFFFF8A3D),
            tabs: [
              Tab(text: '关注'),
              Tab(text: '粉丝'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _buildUserList(_followingUsers),
            _buildUserList(_fansUsers),
          ],
        ),
      ),
    );
  }

  Widget _buildUserList(List<Map<String, dynamic>> users) {
    return ListView.separated(
      padding: const EdgeInsets.all(16),
      itemCount: users.length,
      separatorBuilder: (_, __) => const SizedBox(height: 10),
      itemBuilder: (context, index) {
        final user = users[index];
        final isFollowing = user['isFollowing'] as bool;
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(14),
          ),
          child: Row(
            children: [
              CircleAvatar(
                radius: 22,
                backgroundColor: const Color(0xFFFFE7CF),
                backgroundImage: NetworkImage('https://i.pravatar.cc/50?img=${user['avatar']}'),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Text(
                  user['name'] as String,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF333333),
                  ),
                ),
              ),
              SizedBox(
                height: 34,
                child: TextButton(
                  onPressed: () => _toggleFollow(users, index),
                  style: TextButton.styleFrom(
                    backgroundColor: isFollowing ? Colors.white : const Color(0xFFFF8A3D),
                    foregroundColor: isFollowing ? const Color(0xFFFF8A3D) : Colors.white,
                    side: const BorderSide(color: Color(0xFFFF8A3D)),
                    padding: const EdgeInsets.symmetric(horizontal: 14),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
                  ),
                  child: Text(
                    isFollowing ? '已关注' : '关注',
                    style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 13),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}