import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/pages/mh_page/test/WebviewTestModel.dart';

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

  @override
  State<MattressControlPage> createState() => _MattressControlPageState();
}

class _MattressControlPageState extends State<MattressControlPage> {
  final controller = Get.put(ControlCardController());

  int selectedIndex = 1; // 当前选中的tab索引
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (context, bodySize) => 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(
                  backgroundColor: Colors.transparent,
                  // 顶部返回 + 设备选择 + 蓝牙图标 + 设置按钮
                  // appBar: AppBar(
                  //   backgroundColor: Colors.transparent,
                  //   automaticallyImplyLeading: false,
                  //   titleSpacing: 0,
                  //   elevation: 0,
                  //   title: SizedBox(
                  //       width: double.infinity,
                  //       height: 180.rpx,
                  //       child: Row(
                  //         mainAxisAlignment: MainAxisAlignment.start,
                  //         children: [
                  //           SizedBox(width: 20.rpx),
                  //           returnIconButtomNew,
                  //           SizedBox(width: 26.rpx),
                  //           Container(
                  //             decoration: BoxDecoration(
                  //               color: Color(0xFF003058),
                  //               borderRadius: BorderRadius.circular(30.rpx),
                  //             ),
                  //             constraints: BoxConstraints(
                  //                 minHeight: 60.rpx,
                  //                 maxHeight: 60.rpx,
                  //                 maxWidth: 260.rpx,
                  //                 minWidth: 260.rpx),
                  //             padding: EdgeInsets.symmetric(
                  //                 horizontal: 20.rpx), // 加左右边距
                  //             child: DropdownButton<String>(
                  //               value: 'Eason Chan',
                  //               underline: const SizedBox(),
                  //               dropdownColor: Colors.blueGrey,
                  //               iconEnabledColor: Colors.white,
                  //               style: const TextStyle(color: Colors.white),
                  //               isExpanded: true,
                  //               items: const [
                  //                 DropdownMenuItem(
                  //                   value: 'Eason Chan',
                  //                   child: Text('Eason Chan'),
                  //                 ),
                  //                 DropdownMenuItem(
                  //                   value: 'Anna',
                  //                   child: Text('Anna'),
                  //                 ),
                  //               ],
                  //               onChanged: (_) {},
                  //             ),
                  //           ),
                  //         ],
                  //       )),
                  //   actions: [
                  //     ClickableContainer(
                  //       backgroundColor: Colors.transparent,
                  //       highlightColor: Colors.transparent,
                  //       padding: EdgeInsets.only(right: 69.rpx),
                  //       onTap: () {},
                  //       child: Icon(
                  //         Icons.bluetooth,
                  //         color: Colors.white,
                  //         size: 42.rpx,
                  //       ),
                  //     ),
                  //     ClickableContainer(
                  //         backgroundColor: Colors.transparent,
                  //         highlightColor: Colors.transparent,
                  //         padding: EdgeInsets.only(right: 38.rpx),
                  //         onTap: () {
                  //           Get.toNamed('/bluetoothPage', arguments: data);
                  //         },
                  //         child: Icon(Icons.tune,
                  //             color: Colors.white, size: 42.rpx))
                  //   ],
                  //   centerTitle: false,
                  // ),

                  body: SafeArea(
                    child: WebviewTestView(
                        // oncreate: (widget) {
                        //   return WebviewTestController();
                        // },
                        ),
                  ),
                ))));
  }

  // 床体图示
  Widget _buildBedImageSection(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 38.rpx, 0, 63.rpx),
      child: Image.asset(
        'assets/images/bed_control.png',
        width: MediaQuery.of(context).size.width * 0.7, // 你需要准备这个图像资源
        height: 193.rpx,
      ),
    );
  }

  Widget _buildModeSelector(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width - 60.rpx; // 左右各30
    final spacing = 20.0.rpx;
    final thirdWidth = 215.rpx; // 三个卡片两个间距
    final tabCount = 3;
    final tabWidth = screenWidth / tabCount;
    final sideMargin = (tabWidth - thirdWidth) / 2;

    final labels = ['左', '全局', '右'];

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 30.rpx),
      child: Stack(
        children: [
          Row(
            children: List.generate(tabCount, (index) {
              return Expanded(
                child: GestureDetector(
                  onTap: () {
                    selectedIndex = index;
                  },
                  child: _selectorTab(
                    labels[index],
                    isSelected: selectedIndex == index,
                    sideMargin: sideMargin,
                  ),
                ),
              );
            }),
          ),
          // 白线指示器
          Positioned(
            bottom: 0,
            left: selectedIndex * tabWidth + sideMargin,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              width: thirdWidth,
              height: 3.rpx,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  Widget _selectorTab(String label,
      {bool isSelected = false, double sideMargin = 0}) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: sideMargin),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              label,
              style: TextStyle(
                color: isSelected ? Colors.white : Colors.grey,
                fontSize: 30.rpx,
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
              ),
            ),
          ),
          if (isSelected) SizedBox(height: 15.rpx), // 保留间距，避免文字和线重叠
        ],
      ),
    );
  }

  Widget _buildControlCards(BuildContext context) {
    final spacing = 20.0.rpx;

    final List<Map<String, dynamic>> allCards = [
      {'title': '一键助眠', 'time': '30:00'},
      {'title': '疲劳缓解', 'time': '20:00'},
      {'title': '全身放松', 'time': '20:00'},
      {'title': '背部律动', 'time': '10:00'},
      {'title': '腿部律动', 'time': '30:00'},
      {'title': '垂直律动', 'time': ''},
      {'title': '加热', 'time': '30:00'},
      {'title': '柔性唤醒', 'time': 'PM 08:00'},
      {'title': '记忆', 'time': ''},
    ];

    final firstRow = allCards.sublist(0, 3);
    final restCards = allCards.sublist(3);

    // 后续每行两个
    List<List<Map<String, dynamic>>> chunkedRows = [];
    for (int i = 0; i < restCards.length; i += 2) {
      int end = (i + 2 < restCards.length) ? i + 2 : restCards.length;
      chunkedRows.add(restCards.sublist(i, end));
    }

    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 30.rpx, vertical: 30.rpx),
        child: Column(
          children: [
            // 第一行：三个卡片
            Row(
              children: List.generate(firstRow.length * 2 - 1, (index) {
                if (index.isOdd) {
                  return SizedBox(width: spacing); // 卡片间距
                } else {
                  final item = firstRow[index ~/ 2];
                  return Expanded(
                    flex: 1,
                    child: _buildControlCard(
                      index ~/ 2,
                      item['title'],
                      item['time'],
                      // null, // 不再使用固定宽度
                    ),
                  );
                }
              }),
            ),
            SizedBox(height: spacing),
            // 其余每行两个卡片
            ...chunkedRows.map((row) {
              return Padding(
                padding: EdgeInsets.only(bottom: spacing),
                child: Row(
                  children: List.generate(row.length * 2 - 1, (index) {
                    if (index.isOdd) {
                      return SizedBox(width: spacing);
                    } else {
                      final item = row[index ~/ 2];
                      return Expanded(
                        flex: 1,
                        child: _buildControlCard(
                          index ~/ 2,
                          item['title'],
                          item['time'],
                          // null,
                        ),
                      );
                    }
                  }),
                ),
              );
            }).toList(),
          ],
        ),
      ),
    );
  }

  Widget _buildControlCard(
    int index,
    String title,
    String time,
    // double width,
  ) {
    final controller = Get.find<ControlCardController>();

    return Container(
      // width: width,
      height: 241.rpx,
      decoration: BoxDecoration(
        color: const Color(0xFF003058),
        borderRadius: BorderRadius.circular(8),
      ),
      padding: EdgeInsets.all(15.rpx),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            children: [
              SvgPicture.asset(
                'assets/img/icon/group.svg',
                width: 60.rpx,
                height: 60.rpx,
                color: Colors.white,
              ),
              SizedBox(height: 22.rpx),
              Text(
                title,
                style: TextStyle(color: Colors.white, fontSize: 30.rpx),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                time,
                style: TextStyle(
                  color: const Color(0XFF929699),
                  fontSize: 26.rpx,
                  fontFamily: 'PingFang SC',
                ),
              ),
              Obx(() => FlutterSwitch(
                    width: 71.rpx,
                    height: 36.rpx,
                    toggleSize: 30.rpx,
                    activeColor: const Color(0XFF6BFDAC),
                    inactiveColor: const Color(0XFF011D33),
                    value: controller.switchStates[index].value,
                    onToggle: (val) {
                      controller.switchStates[index].value = val;
                    },
                  )),
            ],
          ),
        ],
      ),
    );
  }
}

class ControlCardController extends GetxController {
  // 共9个卡片，每个卡片有自己的开关状态
  final List<RxBool> switchStates = List.generate(9, (index) => false.obs);
}