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> {
  Map data;
  ShareDeviceWidget({super.key, required this.data});
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final ScrollController scrollController = ScrollController();

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

  fetchData() async {
    await controller.shareDeviceList(data["mac".tr]);
  }

  @override
  Widget build(BuildContext context) {
    controller.model.msg = "";
    controller.model.code = 0;
    controller.model.type = 1;
    controller.model.account = '';
    fetchData();
    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(
                  '分享设备'.tr,
                  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: 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(
                                '将以下设备分享给您的家人或朋友'.tr,
                                style: TextStyle(
                                  fontFamily: 'Readex Pro',
                                  color: Colors.white,
                                  fontSize: 30.rpx,
                                  letterSpacing: 0.0,
                                  height: 1,
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    "设备ID：".tr,
                                    style: TextStyle(
                                        fontFamily: 'Readex Pro',
                                        color: const Color(0xFF6BFDAC),
                                        fontSize: 26.rpx,
                                        letterSpacing: 0.0,
                                        height: 1),
                                  ),
                                  Text(
                                    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,
                                      textAlign: TextAlign.center,
                                      decoration: InputDecoration(
                                        hintText: '请输入对方手机号/邮箱号'.tr,
                                        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下载链接'.tr,
                                  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,
                                          ),
                                        ),
                                      ),
                                    );
                                  }),
                                ],
                              ),
                            ),
                          ),
                          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'.tr]);
                                    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 NullDataWidget();
                //                   // return SingleChildScrollView(
                //                   //   physics:
                //                   //       NeverScrollableScrollPhysics(), // 禁止滚动
                //                   //   child: Center(
                //                   //     child: Padding(
                //                   //       padding: EdgeInsets.symmetric(
                //                   //           vertical: 60),
                //                   //       child: NullDataWidget(),
                //                   //     ),
                //                   //   ),
                //                   // );
                //                 }

                //                 // 否则显示正常的 ListView
                //                 return ListView(
                //                   controller:
                //                       scrollController, // 绑定 ScrollController
                //                   shrinkWrap: true,
                //                   scrollDirection: Axis.vertical,
                //                   children: (controller.model.shareUser!
                //                           .asMap()
                //                           .entries
                //                           .map((e) => ShareUserWidget(
                //                               index: e.key,
                //                               mac: data['mac'.tr],
                //                               repairListController: controller))
                //                           .toList() as List<Widget>)
                //                       // .divide(const SizedBox(
                //                       //   height: 13,
                //                       // ))
                //                       .addToEnd(const SizedBox(
                //                     height: AppConstants.list_end_height,
                //                   )),
                //                 );
                //               },
                //             ),
                //           ],
                //         ),
                //       ),
                //     ),
                //   ),
                // ),
                Expanded(
                  child: Padding(
                    padding:
                        EdgeInsetsDirectional.fromSTEB(0, 100.rpx, 0, 32.rpx),
                    child: Obx(() {
                      final shareUsers = controller.model.shareUser;

                      // 无数据时，直接返回不带滚动的 Column
                      if (shareUsers == null || shareUsers.isEmpty) {
                        return Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Align(
                              alignment: AlignmentDirectional(-1, 0),
                              child: Padding(
                                padding: 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,
                                  ),
                                ),
                              ),
                            ),
                            Expanded(
                              child: Center(
                                child: NullDataWidget(),
                              ),
                            )
                          ],
                        );
                      }

                      // 有数据时，返回 ListView（可滚动）
                      return Column(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Align(
                            alignment: AlignmentDirectional(-1, 0),
                            child: Padding(
                              padding:
                                  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,
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: ListView(
                              controller: scrollController,
                              padding: EdgeInsets.zero,
                              children: shareUsers
                                  .asMap()
                                  .entries
                                  .map((e) => ShareUserWidget(
                                        index: e.key,
                                        mac: data['mac'.tr],
                                        repairListController: controller,
                                      ))
                                  .toList()
                                  .addToEnd(SizedBox(
                                      height: AppConstants.list_end_height)),
                            ),
                          ),
                        ],
                      );
                    }),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ));
  }
}