import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:qhdkfq_regulatory_flutter/mine/message_detail_page.dart';
import 'package:qhdkfq_regulatory_flutter/tools/my_appbar.dart';
import 'package:qhdkfq_regulatory_flutter/tools/tools.dart';


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

  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage>
    with SingleTickerProviderStateMixin {

  final List<NotificationItem> notifications = [
    NotificationItem(
      type: '会议任务下发提醒',
      isRead: false,
      time: '2025-05-30 10:07:42',
      title: '阿斯顿',
      period: '行动周期2025-05-...',
    ),
    NotificationItem(
      type: '学习任务下发提醒',
      isRead: false,
      time: '2025-05-30 10:05:30',
      title: '测试附件',
      period: '行动周期2025-0-...',
    ),
    NotificationItem(
      type: '学习任务下发提醒',
      isRead: false,
      time: '2025-05-26 14:07:46',
      title: '0526-1',
      period: '行动周期2025-05-...',
    ),
    NotificationItem(
      type: '会议任务下发提醒',
      isRead: false,
      time: '2025-04-23 17:43:35',
      title: '测试423',
      period: '行动周期2025-0-...',
    ),
    NotificationItem(
      type: '学习任务下发提醒',
      isRead: false,
      time: '2025-04-23 17:40:44',
      title: '测试4.23',
      period: '行动周期2025-0-...',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppbar(title: "通知提醒"),
      body:
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const SizedBox(height: 10,),
                  Container(
                    width: MediaQuery.of(context).size.width, // 获取屏幕宽度
                    margin: EdgeInsets.only(left: 15,right: 15),
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(6),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.1),
                          spreadRadius: 2,
                          blurRadius: 8,
                          offset: const Offset(0, 4),
                        ),
                      ],
                    ),
                    padding: EdgeInsets.all(10),
                    child:
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          for (int i = 0; i < notifications.length; i++) {
                            notifications[i].isRead = true;
                          }
                        });
                      },

                     child:  Text(
                        "一键已读",
                        textAlign:TextAlign.center,
                        style: TextStyle(
                          fontSize: 13,

                          color: Colors.white,

                        ) ,
                      ),
                    )

                  ),


                  Expanded(
                      child:  ListView.builder(
                        itemCount: notifications.length,
                        itemBuilder: (context, index) {
                          final notification = notifications[index];
                          return NotificationCard(item: notification);
                        },
                      ),
                  )

                ],
              ),



    );
  }
}

class NotificationItem {
   String type;
   bool isRead;
   String time;
   String title;
   String period;

  NotificationItem({
    required this.type,
    required this.isRead,
    required this.time,
    required this.title,
    required this.period,
  });
}

class NotificationCard extends StatelessWidget {
  final NotificationItem item;

  const NotificationCard({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
        side: const BorderSide(color: Color(0xFFEEEEEE), width: 1),
      ),
      child: Padding(
        padding: const EdgeInsets.only(left: 16,top: 16,right: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  item.type,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  decoration: BoxDecoration(
                    color: item.isRead ? const Color(0xFFF5F5F5) : Colors.blue[50],
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Text(
                    item.isRead ? '已读' : '未读',
                    style: TextStyle(
                      color: item.isRead ? Colors.grey : Colors.blue,
                      fontSize: 12,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Text(
              '提醒时间: ${item.time}',
              style: const TextStyle(color: Colors.grey, fontSize: 14),
            ),
            const SizedBox(height: 12),
            RichText(
              text: TextSpan(
                style: DefaultTextStyle.of(context).style,
                children: [
                  const TextSpan(
                    text: '温馨提示，任务名称为',
                    style: TextStyle(fontSize: 14),
                  ),
                  TextSpan(
                    text: item.title,
                    style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: Colors.black
                    ),
                  ),
                  TextSpan(
                    text: item.period,
                    style: const TextStyle(fontSize: 14),
                  ),
                ],
              ),
            ),
            // const SizedBox(height: 8),
            Align(
              alignment: Alignment.centerRight,
              child: TextButton(
                onPressed: () {
                    pushPage(MessageDetailPage(), context);
                },
                style: TextButton.styleFrom(
                  // padding: EdgeInsets.only(bottom: 0),
                  minimumSize: Size.zero,
                ),
                child: const Text(
                  '查看详情',
                  style: TextStyle(color: Colors.blue),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}