import 'package:flutter/material.dart';
import 'package:aesthetica_wallpaper/models/message.dart';

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

  // 应用相关消息数据
  static final List<Message> _mockMessages = [
    Message(
      id: '1',
      senderName: 'Aesthetica Team',
      content:
          '🎉 Welcome to Aesthetica Wallpaper! Create stunning mood-based wallpapers with our intuitive editor and stay updated with real-time weather.',
      timestamp: DateTime.now().subtract(const Duration(minutes: 30)),
      avatarUrl: 'https://i.pravatar.cc/150?img=1',
      isRead: false,
    ),
    Message(
      id: '2',
      senderName: 'Weather Update',
      content:
          '🌤️ New Weather Feature Added! Check real-time weather for any city worldwide, get 3-day forecasts, and save your favorite locations.',
      timestamp: DateTime.now().subtract(const Duration(hours: 2)),
      avatarUrl: 'https://i.pravatar.cc/150?img=2',
      isRead: false,
    ),
    Message(
      id: '3',
      senderName: 'Design Tips',
      content:
          '🎨 Pro Tip: Use our Recipe system to save your favorite wallpaper designs and recreate them anytime. Perfect for creating consistent themes!',
      timestamp: DateTime.now().subtract(const Duration(hours: 6)),
      avatarUrl: 'https://i.pravatar.cc/150?img=3',
      isRead: true,
    ),
    Message(
      id: '4',
      senderName: 'Feature Highlight',
      content:
          '✨ Explore our curated wallpaper collections: Nature scenes, Abstract art, and Architecture. Each category offers unique creative possibilities.',
      timestamp: DateTime.now().subtract(const Duration(days: 1)),
      avatarUrl: 'https://i.pravatar.cc/150?img=4',
      isRead: true,
    ),
    Message(
      id: '5',
      senderName: 'Aesthetica Team',
      content:
          '💝 Thank you for choosing Aesthetica! Your creativity inspires us. Share your feedback to help us make the app even better.',
      timestamp: DateTime.now().subtract(const Duration(days: 2)),
      avatarUrl: 'https://i.pravatar.cc/150?img=5',
      isRead: true,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Messages'),
        backgroundColor: Colors.grey[900],
        elevation: 0,
      ),
      body: ListView.builder(
        padding: const EdgeInsets.fromLTRB(
          16,
          16,
          16,
          100,
        ), // 增加底部内边距避免被底部导航栏遮挡
        itemCount: _mockMessages.length,
        itemBuilder: (context, index) {
          final message = _mockMessages[index];
          return _buildMessageCard(context, message);
        },
      ),
    );
  }

  Widget _buildMessageCard(BuildContext context, Message message) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      child: InkWell(
        onTap: () {
          // 可以添加点击消息的详细页面
          _showMessageDetail(context, message);
        },
        borderRadius: BorderRadius.circular(12),
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey[800],
            borderRadius: BorderRadius.circular(12),
            border: message.isRead
                ? null
                : Border.all(color: Colors.pinkAccent, width: 1),
          ),
          child: Row(
            children: [
              // 头像
              CircleAvatar(
                radius: 25,
                backgroundColor: Colors.pinkAccent,
                child: Text(
                  message.senderName[0].toUpperCase(),
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(width: 12),
              // 消息内容
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          message.senderName,
                          style: TextStyle(
                            color: message.isRead
                                ? Colors.grey[300]
                                : Colors.white,
                            fontSize: 16,
                            fontWeight: message.isRead
                                ? FontWeight.normal
                                : FontWeight.bold,
                          ),
                        ),
                        Text(
                          message.formattedTime,
                          style: TextStyle(
                            color: Colors.grey[400],
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 4),
                    Text(
                      message.content,
                      style: TextStyle(
                        color: message.isRead
                            ? Colors.grey[400]
                            : Colors.grey[200],
                        fontSize: 14,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
              // 未读标识
              if (!message.isRead)
                Container(
                  width: 8,
                  height: 8,
                  decoration: const BoxDecoration(
                    color: Colors.pinkAccent,
                    shape: BoxShape.circle,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  void _showMessageDetail(BuildContext context, Message message) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        backgroundColor: Colors.grey[800],
        title: Row(
          children: [
            CircleAvatar(
              radius: 20,
              backgroundColor: Colors.pinkAccent,
              child: Text(
                message.senderName[0].toUpperCase(),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    message.senderName,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    message.formattedTime,
                    style: TextStyle(color: Colors.grey[400], fontSize: 12),
                  ),
                ],
              ),
            ),
          ],
        ),
        content: Text(
          message.content,
          style: const TextStyle(color: Colors.white, fontSize: 16),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text(
              'Close',
              style: TextStyle(color: Colors.pinkAccent),
            ),
          ),
        ],
      ),
    );
  }
}