import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/color/appFontsize.dart';
import 'package:vbvs_app/common/color/app_uri_status.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/component/NullDataComponentWidget.dart';
import 'package:vbvs_app/component/tool/ClickableContainer.dart';
import 'package:vbvs_app/component/tool/TopSlideNotification.dart';
import 'package:vbvs_app/controller/mh_controller/message_controller.dart';
import 'package:vbvs_app/controller/theme_controller/ThemeController.dart';
import 'package:vbvs_app/pages/mh_page/MhMessageList.dart';

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

  @override
  State<MessagePage> createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {
  ThemeController themeController = Get.find();
  MhMessageController messageController = Get.find();
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    messageController.model.type = 1;
    _pageController =
        PageController(initialPage: messageController.model.type == 1 ? 0 : 1);
    messageController.getMessageStatus();
    _fetchMessageData();
  }

  void _fetchMessageData() {
    String type = messageController.model.type == 1 ? "app_vsm" : "app_system";
    messageController.updateMessageStatus(type: type);
    messageController.getMessageList().then((response) {
      if (response.code != HttpStatusCodes.ok) {
        TopSlideNotification.show(
          // Get.context!,
          context,
          text: response.msg ?? "服务器.失败".tr,
          textColor: themeController.currentColor.sc9,
        );
      }
    });
  }

  void _onTabChanged(int index) {
    messageController.model.type = index == 0 ? 1 : 2;
    messageController.updateAll();
    _fetchMessageData();
    _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
  }

  void _onPageChanged(int index) {
    int newType = index == 0 ? 1 : 2;
    if (messageController.model.type != newType) {
      messageController.model.type = newType;
      messageController.updateAll();
      _fetchMessageData();
    }
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // messageController.messageList.value = [
    //   {
    //     "_id": "6836c3ee4e626030c8000000",
    //     "type": "app_vsm",
    //     "data": {
    //       "title": "实时监测通知",
    //       "val": [
    //         {"k": "设备ID", "v": "48ca43b1b454"},
    //         {"k": "使用人员", "v": "bb"},
    //         {"k": "消息类型", "v": "呼吸异常"},
    //         {"k": "检测值", "v": '26'},
    //         {"k": "检测时间", "v": "2025-05-28 16:06:07"}
    //       ]
    //     },
    //     "level": 3,
    //     "tid": "67f5d96e26ef310463000000",
    //     "uid": "68319fe9702cc59bd1000000",
    //     "status": 0,
    //     "createTime": "1748419566651"
    //   },
    //   {
    //     "_id": "6836c3e84e625f30c8000000",
    //     "type": "app_vsm",
    //     "data": {
    //       "title": "实时监测通知",
    //       "val": [
    //         {"k": "设备ID", "v": "48ca43b1b454"},
    //         {"k": "使用人员", "v": "bb"},
    //         {"k": "消息类型", "v": "心率异常"},
    //         {"k": "检测值", "v": '115'},
    //         {"k": "检测时间", "v": "2025-05-28 16:06:00"}
    //       ]
    //     },
    //     "level": 3,
    //     "tid": "67f5d96e26ef310463000000",
    //     "uid": "68319fe9702cc59bd1000000",
    //     "status": 0,
    //     "createTime": "1748419560486"
    //   },
    //   {
    //     "_id": "6836bd0c4e625e30c8000000",
    //     "type": "app_vsm",
    //     "data": {
    //       "title": "实时监测通知",
    //       "val": [
    //         {"k": "设备ID", "v": "48ca43b1b454"},
    //         {"k": "使用人员", "v": "bb"},
    //         {"k": "消息类型", "v": "心率异常"},
    //         {"k": "检测值", "v": '107'},
    //         {"k": "检测时间", "v": "1748417761000"}
    //       ]
    //     },
    //     "level": 3,
    //     "tid": "67f5d96e26ef310463000000",
    //     "uid": "68319fe9702cc59bd1000000",
    //     "status": 0,
    //     "createTime": "1748417804381"
    //   }
    // ];

    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
    ));

    return LayoutBuilder(
      builder: (context, boxConstraints) => GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/new_background.png'), // 本地图片
              fit: BoxFit.fill, // 填满整个 Container
            ),
          ),
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              automaticallyImplyLeading: false,
              iconTheme: IconThemeData(color: themeController.currentColor.sc3),
              titleSpacing: 0,
              title: SizedBox(
                width: double.infinity,
                height: 180.rpx,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    // 中间居中的标题
                    Text(
                      '消息中心',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30.rpx,
                      ),
                    ),
                    // 左侧图标
                    Positioned(
                      left: 0.rpx,
                      child: returnIconButtomNew,
                    ),
                  ],
                ),
              ),
              actions: const [],
              centerTitle: false,
            ),
            backgroundColor: Colors.transparent,
            body: SafeArea(
                top: true,
                child: Padding(
                  padding: EdgeInsets.only(top: 30.rpx),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 100.rpx,
                        child: Stack(
                          alignment: Alignment.bottomCenter,
                          children: [
                            Row(
                              children: [
                                // 第一个 Tab 占据屏幕一半
                                bodyMessage(),
                                // 第二个 Tab 占据屏幕另一半
                                systemMessage(),
                              ],
                            ),
                            Obx(() {
                              double screenWidth =
                                  MediaQuery.of(context).size.width;
                              double tabWidth = screenWidth / 2;
                              double margin = 30.rpx;
                              double lineWidth = tabWidth - 2 * margin;
                              // 计算滑块左边距，保证滑块水平居中于对应tab的文字
                              double left = (messageController.model.type == 1
                                      ? 0
                                      : tabWidth) +
                                  margin;
                              return AnimatedPositioned(
                                duration: const Duration(milliseconds: 300),
                                curve: Curves.easeInOut,
                                bottom: 0,
                                left: left,
                                child: Container(
                                  width: lineWidth,
                                  height: 4.rpx,
                                  decoration: BoxDecoration(
                                    color: Color(0xFF84F5FF),
                                    borderRadius: BorderRadius.circular(2.rpx),
                                  ),
                                ),
                              );
                            }),
                          ],
                        ),
                      ),
                      Expanded(
                        child: PageView(
                          controller: _pageController,
                          onPageChanged: _onPageChanged,
                          children: [
                            Obx(() {
                              final list = messageController.messageList;
                              return list.isEmpty
                                  ? const NullDataWidget()
                                  : _buildMessageListView(list);
                            }),
                            Obx(() {
                              final list = messageController.messageList;
                              return list.isEmpty
                                  ? const NullDataWidget()
                                  : _buildMessageListView(list);
                            }),
                          ],
                        ),
                      ),
                      bottomIcon(context)
                    ],
                  ),
                )),
          ),
        ),
      ),
    );
  
  }

  Container bottomIcon(BuildContext context) {
    return Container(
      height: 120.rpx,
      decoration: BoxDecoration(
        color: Color(0xFF003058),
      ),
      width: double.infinity,
      child: TextButton(
        onPressed: () {},
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Baseline(
                baselineType: TextBaseline.alphabetic,
                baseline: AppFontsize.normal_text_size * 1.6, // 调整基线位置
                child: SvgPicture.asset(
                  'assets/images/read_message.svg',
                  width: 40.rpx,
                  height: 40.rpx,
                )),
            SizedBox(width: 14.rpx), // 加号和文字间距
            Text(
              '全部已读',
              style: TextStyle(
                fontFamily: 'Readex Pro',
                color: Colors.white,
                fontSize: 26.rpx,
                letterSpacing: 0,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Expanded systemMessage() {
    return Expanded(
      child: Align(
        alignment: Alignment.center,
        child: Obx(() {
          return ClickableContainer(
            padding: EdgeInsets.zero,
            backgroundColor: Colors.transparent,
            highlightColor: themeController.currentColor.sc21,
            borderRadius: 8.rpx,
            onTap: () => _onTabChanged(1),
            child: Stack(
              alignment: Alignment.center,
              clipBehavior: Clip.none,
              children: [
                Text(
                  '系统消息'.tr,
                  style: TextStyle(
                    fontSize: AppConstants().title_text_fontSize,
                    color: messageController.model.type == 1
                        ? Colors.white
                        : Color(0xFF84F5FF),
                    height: 1.0,
                  ),
                ),
                Obx(() {
                  return messageController.model.system_message_read == 1
                      ? Positioned(
                          top: -4,
                          right: -14,
                          child: Container(
                            width: 8,
                            height: 8,
                            decoration: const BoxDecoration(
                              color: Colors.red,
                              shape: BoxShape.circle,
                            ),
                          ),
                        )
                      : const SizedBox.shrink();
                }),
              ],
            ),
          );
        }),
      ),
    );
  }

  Expanded bodyMessage() {
    return Expanded(
      child: Align(
        alignment: Alignment.center,
        child: Obx(() {
          return ClickableContainer(
            padding: EdgeInsets.zero,
            backgroundColor: Colors.transparent,
            highlightColor: themeController.currentColor.sc21,
            borderRadius: 8.rpx,
            onTap: () => _onTabChanged(0),
            child: Stack(
              alignment: Alignment.center,
              clipBehavior: Clip.none,
              children: [
                Text(
                  '体征消息'.tr,
                  style: TextStyle(
                    fontSize: AppConstants().title_text_fontSize,
                    color: messageController.model.type == 2
                        ? Colors.white
                        : Color(0xFF84F5FF),
                    height: 1.0,
                  ),
                ),
                Obx(() {
                  return messageController.model.body_message_read == 1
                      ? Positioned(
                          top: -4,
                          right: -14,
                          child: Container(
                            width: 8,
                            height: 8,
                            decoration: const BoxDecoration(
                              color: Colors.red,
                              shape: BoxShape.circle,
                            ),
                          ),
                        )
                      : const SizedBox.shrink();
                }),
              ],
            ),
          );
        }),
      ),
    );
  }

  Widget _buildMessageListView(List dataList) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(horizontal: 30.rpx),
      child: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 30.rpx),
            ...dataList
                .map((item) => MhMessageListWidget(data: item))
                .toList()
                .divide(SizedBox(height: 30.rpx)),
            SizedBox(height: 30.rpx),
          ],
        ),
      ),
    );
  }
}