import 'package:flutter/material.dart';
import 'chat_screen.dart';
import 'login_screen.dart';

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

  @override
  Widget build(BuildContext context) {
    final chats = [
      {'name': 'Alice Smith', 'msg': 'Hey, how are you?', 'time': '10:30 AM', 'unread': 2, 'color': Colors.red},
      {'name': 'Bob Johnson', 'msg': 'Are we still on for tomorrow?', 'time': '9:45 AM', 'unread': 0, 'color': Colors.blue},
      {'name': 'Charlie Brown', 'msg': 'I sent you the files.', 'time': 'Yesterday', 'unread': 0, 'color': Colors.green},
      {'name': 'Design Team', 'msg': 'Dave: The new mocks look great.', 'time': 'Yesterday', 'unread': 5, 'color': Colors.purple},
      {'name': 'Eve', 'msg': 'Ok.', 'time': 'Tuesday', 'unread': 0, 'color': Colors.orange},
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Messenger'),
        backgroundColor: const Color(0xFF2AABEE),
        foregroundColor: Colors.white,
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const UserAccountsDrawerHeader(
              accountName: Text('John Doe', style: TextStyle(fontWeight: FontWeight.bold)),
              accountEmail: Text('johndoe@example.com'),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.white,
                child: Text('J', style: TextStyle(fontSize: 24, color: Color(0xFF2AABEE))),
              ),
              decoration: BoxDecoration(color: Color(0xFF2AABEE)),
            ),
            ListTile(
              leading: const Icon(Icons.group),
              title: const Text('New Group'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.person),
              title: const Text('Contacts'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.bookmark_border),
              title: const Text('Saved Messages'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Settings'),
              onTap: () {},
            ),
            const Divider(),
            ListTile(
              leading: const Icon(Icons.person_add),
              title: const Text('Invite Friends'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.help_outline),
              title: const Text('Messenger Features'),
              onTap: () {},
            ),
            const Divider(),
            ListTile(
              leading: const Icon(Icons.logout, color: Colors.red),
              title: const Text('Log out', style: TextStyle(color: Colors.red)),
              onTap: () {
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => const LoginScreen()),
                );
              },
            ),
          ],
        ),
      ),
      body: ListView.separated(
        itemCount: chats.length,
        separatorBuilder: (context, index) => const Divider(height: 1, indent: 72),
        itemBuilder: (context, index) {
          final chat = chats[index];
          return ListTile(
            leading: CircleAvatar(
              backgroundColor: chat['color'] as Color,
              radius: 26,
              child: Text(
                (chat['name'] as String)[0],
                style: const TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
            title: Text(
              chat['name'] as String,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            subtitle: Text(
              chat['msg'] as String,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            trailing: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  chat['time'] as String,
                  style: const TextStyle(color: Colors.grey, fontSize: 12),
                ),
                const SizedBox(height: 4),
                if ((chat['unread'] as int) > 0)
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                    decoration: BoxDecoration(
                      color: const Color(0xFF2AABEE),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Text(
                      '${chat['unread']}',
                      style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold),
                    ),
                  )
                else
                  const SizedBox(height: 16),
              ],
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ChatScreen(name: chat['name'] as String),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: const Color(0xFF2AABEE),
        foregroundColor: Colors.white,
        child: const Icon(Icons.edit),
      ),
    );
  }
}