import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/color/app_uri_status.dart';
import 'package:vbvs_app/common/util/FitTool.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/message/message_controller.dart';
import 'package:vbvs_app/controller/theme_controller/ThemeController.dart';
import 'package:vbvs_app/pages/main_bottom/component/MessageWidgetWidget.dart';

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

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

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

  @override
  void initState() {
    super.initState();
    _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!,
          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) {
    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/img/bgNoImg.png'),
              fit: BoxFit.fill,
            ),
          ),
          child: Scaffold(
            appBar: AppBar(
              backgroundColor: themeController.currentColor.sc17,
              automaticallyImplyLeading: false,
              iconTheme: IconThemeData(color: themeController.currentColor.sc3),
              // toolbarHeight: 140.rpx,
              titleSpacing: 0,
              title: Padding(
                padding: EdgeInsetsDirectional.fromSTEB(0.rpx, 0, 0.rpx, 0),
                child: Container(
                  width: double.infinity,
                  height: 140.rpx,
                  child: Column(
                    children: [
                      SizedBox(height: 40.rpx),
                      Expanded(
                        child: Stack(
                          alignment: Alignment.bottomLeft,
                          children: [
                            Row(
                              children: [
                                // 第一个容器，宽度占屏幕一半
                                Obx(() {
                                  return Expanded(
                                    child: ClickableContainer(
                                      padding: EdgeInsets.all(0),
                                      backgroundColor: Colors.transparent,
                                      highlightColor:
                                          themeController.currentColor.sc21,
                                      borderRadius: 8.rpx,
                                      onTap: () => _onTabChanged(0),
                                      child: Container(
                                        alignment: Alignment.center,
                                        child: Stack(
                                          alignment: Alignment.center,
                                          clipBehavior: Clip.none,
                                          children: [
                                            Text(
                                              '体征消息'.tr,
                                              style: TextStyle(
                                                fontFamily: 'Inter',
                                                fontSize: AppConstants()
                                                    .title_text_fontSize,
                                                color:
                                                    messageController
                                                                .model.type ==
                                                            2
                                                        ? themeController
                                                            .currentColor.sc3
                                                        : themeController
                                                            .currentColor.sc2,
                                              ),
                                            ),
                                            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();
                                            }),
                                          ],
                                        ),
                                      ),
                                    ),
                                  );
                                }),
                                SizedBox(width: 10.rpx),
                                // 第二个容器，宽度占屏幕一半
                                Obx(() {
                                  return Expanded(
                                    child: ClickableContainer(
                                      padding: EdgeInsets.all(0),
                                      backgroundColor: Colors.transparent,
                                      highlightColor:
                                          themeController.currentColor.sc21,
                                      borderRadius: 8.rpx,
                                      onTap: () => _onTabChanged(1),
                                      child: Container(
                                        alignment: Alignment.center,
                                        child: Stack(
                                          alignment: Alignment.center,
                                          clipBehavior: Clip.none,
                                          children: [
                                            Text(
                                              '系统消息'.tr,
                                              style: TextStyle(
                                                fontFamily: 'Inter',
                                                fontSize: AppConstants()
                                                    .title_text_fontSize,
                                                color:
                                                    messageController
                                                                .model.type ==
                                                            1
                                                        ? themeController
                                                            .currentColor.sc3
                                                        : themeController
                                                            .currentColor.sc2,
                                              ),
                                            ),
                                            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();
                                            }),
                                          ],
                                        ),
                                      ),
                                    ),
                                  );
                                }),
                              ],
                            ),
                            // 动画线
                            Obx(() {
                              double lineWidth =
                                  MediaQuery.sizeOf(context).width * 0.5 -
                                      20.rpx; // 每个容器占宽度的一半
                              return AnimatedPositioned(
                                duration: const Duration(milliseconds: 300),
                                curve: Curves.easeInOut,
                                bottom: 0,
                                left: messageController.model.type == 1
                                    ? 0
                                    : MediaQuery.sizeOf(context).width * 0.5 +
                                        10.rpx, // 动态设置左侧位置
                                child: Container(
                                  width: lineWidth,
                                  height: 4.rpx,
                                  decoration: BoxDecoration(
                                    color: themeController.currentColor.sc2,
                                    borderRadius: BorderRadius.circular(2.rpx),
                                  ),
                                ),
                              );
                            }),
                          ],
                        ),
                      ),
                      SizedBox(height: 17.rpx),
                    ],
                  ),
                ),
              ),
              actions: const [],
              centerTitle: false,
            ),
            backgroundColor: Colors.transparent,
            body: SafeArea(
              top: true,
              child: PageView(
                controller: _pageController,
                onPageChanged: _onPageChanged,
                children: [
                  Obx(() {
                    final list = messageController.messageList.value;
                    return list.isEmpty
                        ? const NullDataWidget()
                        : _buildMessageListView(list);
                  }),
                  Obx(() {
                    final list = messageController.messageList.value;
                    return list.isEmpty
                        ? const NullDataWidget()
                        : _buildMessageListView(list);
                  }),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  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) => MessageWidgetWidget(data: item))
                .toList()
                .divide(SizedBox(height: 30.rpx)),
            SizedBox(height: 30.rpx),
          ],
        ),
      ),
    );
  }
}