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/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/mhdevice_share_controller.dart';
import 'package:vbvs_app/model/api_response.dart';
import 'package:vbvs_app/pages/mh_page/ShareUserWidget.dart';

class ShareDeviceWidget extends GetView<MHDeviceShareController> {
  var data;
  ShareDeviceWidget({super.key, required this.data});
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final ScrollController scrollController = ScrollController();

  final _formKey = GlobalKey<FormState>();
  final _phoneController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    controller.model.msg = "";
    controller.model.code = 0;
    controller.model.type = 1;
    controller.model.account = '';
    return 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: const IconThemeData(color: Colors.white),
                titleSpacing: 0,
                title: Container(
                  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: [],
                centerTitle: false,
              ),
              key: scaffoldKey,
              backgroundColor: Colors.transparent,
              body: SingleChildScrollView(
                child: Container(
                  width: MediaQuery.sizeOf(context).width,
                  height: MediaQuery.sizeOf(context).height * 1,
                  child: Padding(
                    padding:
                        EdgeInsetsDirectional.fromSTEB(30.rpx, 0, 30.rpx, 0),
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Padding(
                          padding:
                              EdgeInsetsDirectional.fromSTEB(0, 30.rpx, 0, 0),
                          child: Container(
                            width: MediaQuery.sizeOf(context).width,
                            decoration: BoxDecoration(
                              color: const Color(0xFF003058),
                              borderRadius: BorderRadius.circular(16.rpx),
                            ),
                            child: Padding(
                              padding: EdgeInsetsDirectional.fromSTEB(
                                  30.rpx, 49.rpx, 30.rpx, 80.rpx),
                              child: Column(
                                mainAxisSize: MainAxisSize.max,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Column(
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Text(
                                        '将以下设备分享给您的家人或朋友 ',
                                        style: TextStyle(
                                          fontFamily: 'Readex Pro',
                                          color: Colors.white,
                                          fontSize: 30.rpx,
                                          letterSpacing: 0.0,
                                          height: 1,
                                        ),
                                      ),
                                      Text(
                                        '设备ID：${data['mac']}',
                                        style: TextStyle(
                                            fontFamily: 'Readex Pro',
                                            color: const Color(0xFF6BFDAC),
                                            fontSize: 26.rpx,
                                            letterSpacing: 0.0,
                                            height: 1),
                                      ),
                                    ].divide(SizedBox(height: 65.rpx)),
                                  ),
                                  Padding(
                                    padding: EdgeInsetsDirectional.fromSTEB(
                                        0, 80.rpx, 0, 0),
                                    child: Container(
                                      width: MediaQuery.sizeOf(context).width,
                                      constraints: const BoxConstraints(
                                        minHeight: 46,
                                      ),
                                      decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(16.rpx),
                                      ),
                                      child: Align(
                                          alignment:
                                              const AlignmentDirectional(0, 0),
                                          child: Form(
                                            key: _formKey,
                                            child: TextFormField(
                                              controller: _phoneController,
                                              decoration: InputDecoration(
                                                hintText: '请输入对方手机号/邮箱号',
                                                hintStyle: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  color:
                                                      const Color(0xFF929699),
                                                  fontSize: 36.rpx,
                                                ),
                                                enabledBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Color(0xFF929699),
                                                      width: 0),
                                                ),
                                                focusedBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Color(0xFF929699),
                                                      width: 0),
                                                ),
                                                errorBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Colors.red,
                                                      width: 0),
                                                ),
                                                focusedErrorBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Colors.redAccent,
                                                      width: 0),
                                                ),
                                                contentPadding:
                                                    const EdgeInsets.only(
                                                        left: 10, bottom: 5),
                                              ),
                                              style: TextStyle(
                                                fontFamily: 'Readex Pro',
                                                color: Colors.white,
                                                fontSize: 36.rpx,
                                              ),
                                              onChanged: (value) {
                                                controller.model.account =
                                                    value;
                                              },
                                            ),
                                          )),
                                    ),
                                  ),
                                  ClickableContainer(
                                      backgroundColor: Colors.transparent,
                                      highlightColor: Colors.transparent,
                                      padding: EdgeInsets.only(top: 30.rpx),
                                      onTap: () {},
                                      child: Container(
                                        decoration: const BoxDecoration(
                                          border: Border(
                                            bottom: BorderSide(
                                                color: Color(0xFF85F5FF),
                                                width: 0), // 下边线
                                          ),
                                        ),
                                        child: Text(
                                          '点击复制APP下载链接',
                                          style: TextStyle(
                                            color: Color(0xFF85F5FF), // 蓝色文字

                                            fontSize: 22.rpx,
                                          ),
                                        ),
                                      )),
                                  GestureDetector(
                                    onTap: () {
                                      // 当点击时，将 type 设置为 0（允许控制）
                                      controller.model.type = 1;
                                      controller.updateAll();
                                    },
                                    child: Container(
                                      margin: EdgeInsets.only(top: 76.rpx),
                                      width: MediaQuery.sizeOf(context).width,
                                      constraints: const BoxConstraints(
                                        minHeight: 46,
                                      ),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(0),
                                      ),
                                      child: Row(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            '允许对方控制该设备'.tr,
                                            style: TextStyle(
                                              fontFamily: 'Readex Pro',
                                              color: Colors.white,
                                              fontSize: 26.rpx,
                                              letterSpacing: 0.0,
                                            ),
                                          ),
                                          Obx(() {
                                            double h = 33.rpx;
                                            bool check =
                                                controller.model.type == 1;

                                            return Container(
                                              height: 33.rpx,
                                              child: AspectRatio(
                                                aspectRatio: 1,
                                                child: Center(
                                                  child: Container(
                                                    height: h,
                                                    width: h,
                                                    decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              h / 2),
                                                      border: Border.all(
                                                        width: check ? 1 : 0.5,
                                                        color:
                                                            Color(0xFFC8CBD2),
                                                      ),
                                                    ),
                                                    child: check
                                                        ? Center(
                                                            child: ClipOval(
                                                              child: Container(
                                                                width: h * 0.6,
                                                                height: h * 0.6,
                                                                color: const Color(
                                                                    0xFF6BFDAC),
                                                              ),
                                                            ),
                                                          )
                                                        : null,
                                                  ),
                                                ),
                                              ),
                                            );
                                          }),
                                        ],
                                      ),
                                    ),
                                  ),

                                  // Obx(
                                  //   () => GestureDetector(
                                  //     onTap: () {
                                  //       controller.model.type = 2;
                                  //       controller.updateAll();
                                  //     },
                                  //     child: Container(
                                  //       width: MediaQuery.sizeOf(context).width,
                                  //       constraints: const BoxConstraints(
                                  //         minHeight: 46,
                                  //       ),
                                  //       decoration: BoxDecoration(
                                  //         borderRadius:
                                  //             BorderRadius.circular(0),
                                  //       ),
                                  //       child: Row(
                                  //         mainAxisSize: MainAxisSize.max,
                                  //         mainAxisAlignment:
                                  //             MainAxisAlignment.spaceBetween,
                                  //         children: [
                                  //           Text(
                                  //             '仅允许对方查看该设备'.tr,
                                  //             style: TextStyle(
                                  //               fontFamily: 'Readex Pro',
                                  //               color: Colors.white,
                                  //               fontSize: 26.rpx,
                                  //               letterSpacing: 0.0,
                                  //             ),
                                  //           ),
                                  //           // Theme(
                                  //           //     data:
                                  //           //         Theme.of(context).copyWith(
                                  //           //       unselectedWidgetColor: Color(
                                  //           //           0xFFC8CBD2), // 改变未选中状态边框颜色
                                  //           //     ),
                                  //           //     child: Radio<int>(
                                  //           //       value: 2,
                                  //           //       groupValue:
                                  //           //           controller.model.type,
                                  //           //       onChanged: (value) {
                                  //           //         controller.model.type =
                                  //           //             value!;
                                  //           //         controller.updateAll();
                                  //           //       },
                                  //           //       activeColor:
                                  //           //           const Color(0xFF6BFDAC),
                                  //           //       materialTapTargetSize:
                                  //           //           MaterialTapTargetSize
                                  //           //               .shrinkWrap, // 减少内边距
                                  //           //       visualDensity: VisualDensity(
                                  //           //           horizontal: -4,
                                  //           //           vertical: -4), // 缩小视觉密度
                                  //           //     ))
                                  //           ClipOval(
                                  //             child: Container(
                                  //               height:
                                  //                   MediaQuery.sizeOf(context)
                                  //                           .height *
                                  //                       0.0449,
                                  //               child: AspectRatio(
                                  //                 aspectRatio: 1,
                                  //                 child: Center(
                                  //                   child: LayoutBuilder(
                                  //                     builder: (context,
                                  //                         constraints) {
                                  //                       double h =
                                  //                           MediaQuery.sizeOf(
                                  //                                       context)
                                  //                                   .height *
                                  //                               0.0326;
                                  //                       bool check = controller
                                  //                               .model.type ==
                                  //                           2;
                                  //                       if (check) {
                                  //                         return Container(
                                  //                           height: h,
                                  //                           width: h,
                                  //                           decoration:
                                  //                               BoxDecoration(
                                  //                             borderRadius:
                                  //                                 BorderRadius
                                  //                                     .circular(
                                  //                                         h / 2),
                                  //                             border: Border.all(
                                  //                                 width: 1,
                                  //                                 color: Color(
                                  //                                     0xFF6BFDAC)),
                                  //                           ),
                                  //                           child: Center(
                                  //                             child: ClipOval(
                                  //                               child: Container(
                                  //                                   width:
                                  //                                       h * 0.6,
                                  //                                   height:
                                  //                                       h * 0.6,
                                  //                                   color: Color(
                                  //                                       0xFF6BFDAC)),
                                  //                             ),
                                  //                           ),
                                  //                         );
                                  //                       } else {
                                  //                         return Container(
                                  //                           height: h,
                                  //                           width: h,
                                  //                           decoration:
                                  //                               BoxDecoration(
                                  //                             borderRadius:
                                  //                                 BorderRadius
                                  //                                     .circular(
                                  //                                         h / 2),
                                  //                             border: Border.all(
                                  //                                 width: 0.5,
                                  //                                 color: Colors
                                  //                                     .white),
                                  //                           ),
                                  //                         );
                                  //                       }
                                  //                     },
                                  //                   ),
                                  //                 ),
                                  //               ),
                                  //             ),
                                  //           ),
                                  //         ],
                                  //       ),
                                  //     ),
                                  //   ),
                                  // ),
                                  GestureDetector(
                                    onTap: () {
                                      controller.model.type = 2;
                                      controller.updateAll();
                                    },
                                    child: Container(
                                      width: MediaQuery.sizeOf(context).width,
                                      constraints:
                                          const BoxConstraints(minHeight: 46),
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(0),
                                      ),
                                      child: Row(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            '仅允许对方查看该设备'.tr,
                                            style: TextStyle(
                                              fontFamily: 'Readex Pro',
                                              color: Colors.white,
                                              fontSize: 26.rpx,
                                              letterSpacing: 0.0,
                                            ),
                                          ),
                                          // ✅ 只包住响应式控件部分
                                          Obx(() {
                                            double h = 33.rpx;
                                            bool check =
                                                controller.model.type == 2;

                                            return Container(
                                              height: 33.rpx,
                                              child: AspectRatio(
                                                aspectRatio: 1,
                                                child: Center(
                                                  child: Container(
                                                    height: h,
                                                    width: h,
                                                    decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              h / 2),
                                                      border: Border.all(
                                                        width: check ? 1 : 0.5,
                                                        color:
                                                            Color(0xFFC8CBD2),
                                                      ),
                                                    ),
                                                    child: check
                                                        ? Center(
                                                            child: ClipOval(
                                                              child: Container(
                                                                width: h * 0.6,
                                                                height: h * 0.6,
                                                                color: const Color(
                                                                    0xFF6BFDAC),
                                                              ),
                                                            ),
                                                          )
                                                        : null,
                                                  ),
                                                ),
                                              ),
                                            );
                                          }),
                                        ],
                                      ),
                                    ),
                                  ),

                                  Align(
                                    alignment: const AlignmentDirectional(0, 0),
                                    child: Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 46.rpx, 0, 0),
                                      child: Container(
                                        width: 108,
                                        height: 31,
                                        decoration: BoxDecoration(),
                                        child: FFButtonWidget(
                                          onPressed: () async {
                                            //todo 1:验证用户是否存在 2：发送邀请
                                            ApiResponse apiResponse =
                                                await controller
                                                    .shareDevice(data['mac']);
                                            if (apiResponse.code ==
                                                HttpStatusCodes.ok) {
                                              TopSlideNotification.show(context,
                                                  text: apiResponse.msg!);
                                            } else {
                                              TopSlideNotification.show(context,
                                                  text: apiResponse.msg!,
                                                  textColor: themeController
                                                      .currentColor.sc9);
                                            }
                                          },
                                          text: '发送邀请'.tr,
                                          options: FFButtonOptions(
                                            height: 60.rpx,
                                            padding:
                                                EdgeInsetsDirectional.fromSTEB(
                                                    30.rpx, 0, 30.rpx, 0),
                                            color: const Color(0xFF84F5FF),
                                            textStyle: TextStyle(
                                              fontFamily: 'Readex Pro',
                                              color: Color(0xFF011D33),
                                              fontSize: 26.rpx,
                                              letterSpacing: 0.0,
                                            ),
                                            elevation: 0,
                                            borderRadius:
                                                BorderRadius.circular(50),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsetsDirectional.fromSTEB(
                                0, 100.rpx, 0, 32.rpx),
                            child: Container(
                              width: MediaQuery.sizeOf(context).width,
                              child: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Align(
                                      alignment:
                                          const AlignmentDirectional(-1, 0),
                                      child: Padding(
                                        padding: const EdgeInsetsDirectional
                                            .fromSTEB(14, 0, 0, 16),
                                        child: Text(
                                          '已分享用户'.tr,
                                          style: TextStyle(
                                              fontFamily: 'Readex Pro',
                                              color: Colors.white,
                                              fontSize: 30.rpx,
                                              letterSpacing: 0.0,
                                              height: 1),
                                        ),
                                      ),
                                    ),
                                    Obx(
                                      () {
                                        // 检查 shareUser 是否为空或数量为 0
                                        if (controller.model.shareUser ==
                                                null ||
                                            controller
                                                .model.shareUser!.isEmpty) {
                                          // return Container(
                                          //   alignment: AlignmentDirectional
                                          //       .centerStart, // 确保文字靠左对齐
                                          //   padding: EdgeInsets.symmetric(
                                          //       horizontal: 16.0), // 根据需要设置内边距
                                          //   child: Text(
                                          //     "暂无分享！",
                                          //     textAlign: TextAlign.left, // 文字左对齐
                                          //     style: FlutterFlowTheme.of(context)
                                          //         .bodyMedium, // 可根据需要自定义样式
                                          //   ),
                                          // );
                                          return NullDataWidget();
                                          // EmptyMessageWidget(
                                          //   imagePath:
                                          //       "assets/images/emptyUser.png",
                                          // );
                                        }

                                        // 否则显示正常的 ListView
                                        return ListView(
                                          controller:
                                              scrollController, // 绑定 ScrollController
                                          shrinkWrap: true,
                                          scrollDirection: Axis.vertical,
                                          children: (controller.model.shareUser!
                                                  .asMap()
                                                  .entries
                                                  .map((e) => ShareUserWidget(
                                                      index: e.key,
                                                      repairListController:
                                                          controller))
                                                  .toList() as List<Widget>)
                                              // .divide(const SizedBox(
                                              //   height: 13,
                                              // ))
                                              .addToEnd(const SizedBox(
                                            height:
                                                AppConstants.list_end_height,
                                          )),
                                        );
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              )),
        ));
  }
}
