import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

  final List<Map<String, dynamic>> messages = const [
    {
      "title": "Welcome Home",
      "body":
          "Welcome to FluxWater! Start your cozy journey of hydration today. Remember, a balanced body is a happy mind.",
      "time": "Just now",
      "color": Color(0xFFAED581),
      "icon": Icons.home_rounded,
    },
    {
      "title": "Hydration Tip",
      "body":
          "Did you know? Drinking water before meals can help you feel fuller and aid in digestion. Try a small glass 30 mins before lunch!",
      "time": "2 hrs ago",
      "color": Color(0xFF81D4FA),
      "icon": Icons.lightbulb_rounded,
    },
    {
      "title": "Achievement Unlocked",
      "body":
          "You've successfully set up your daily goal. Taking the first step is always the most important one. Keep it up!",
      "time": "Yesterday",
      "color": Color(0xFFFFCC80),
      "icon": Icons.star_rounded,
    },
    {
      "title": "Version Update",
      "body":
          "FluxWater v2.0 is live! We've added a warmer interface, improved statistics, and a brand new feedback channel just for you.",
      "time": "2 days ago",
      "color": Color(0xFFBCAAA4),
      "icon": Icons.system_update_rounded,
    },
  ];

  void _showMessageDetail(BuildContext context, Map<String, dynamic> msg) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        contentPadding: const EdgeInsets.all(24),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: (msg['color'] as Color).withOpacity(0.2),
                    shape: BoxShape.circle,
                  ),
                  child: Icon(msg['icon'], color: msg['color'], size: 24),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        msg['title'],
                        style: GoogleFonts.nunito(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: const Color(0xFF5D4037),
                        ),
                      ),
                      Text(
                        msg['time'],
                        style: GoogleFonts.quicksand(
                          fontSize: 12,
                          color: const Color(0xFFA1887F),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Text(
              msg['body'],
              style: GoogleFonts.quicksand(
                fontSize: 16,
                height: 1.5,
                color: const Color(0xFF795548),
              ),
            ),
            const SizedBox(height: 24),
            Align(
              alignment: Alignment.centerRight,
              child: TextButton(
                onPressed: () => Navigator.pop(context),
                child: Text(
                  "Close",
                  style: GoogleFonts.nunito(
                    fontWeight: FontWeight.bold,
                    color: const Color(0xFFAED581),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFFBF0),
      appBar: AppBar(
        title: Text(
          "Messages",
          style: GoogleFonts.nunito(fontWeight: FontWeight.bold),
        ),
      ),
      body: ListView.separated(
        padding: const EdgeInsets.all(24),
        itemCount: messages.length,
        separatorBuilder: (ctx, i) => const SizedBox(height: 16),
        itemBuilder: (ctx, i) {
          final msg = messages[i];
          return GestureDetector(
            onTap: () => _showMessageDetail(context, msg),
            child: Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xFF8D6E63).withOpacity(0.05),
                    blurRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      color: (msg['color'] as Color).withOpacity(0.15),
                      shape: BoxShape.circle,
                    ),
                    child: Icon(msg['icon'], color: msg['color'], size: 22),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              msg['title'],
                              style: GoogleFonts.nunito(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                                color: const Color(0xFF5D4037),
                              ),
                            ),
                            Text(
                              msg['time'],
                              style: GoogleFonts.quicksand(
                                fontSize: 12,
                                color: const Color(0xFFBCAAA4),
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 6),
                        Text(
                          msg['body'],
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: GoogleFonts.quicksand(
                            color: const Color(0xFF795548),
                            height: 1.4,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}