import 'dart:ui';

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/controller/user_info_controller.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());
  UserInfoController userInfoController = Get.find();

  int selectedIndex = 1; // 当前选中的tab索引

  @override
  Widget build(BuildContext context) {
    final isLoggedIn = userInfoController.model.login == 1;
    final backgroundImage = isLoggedIn
        ? 'assets/images/new_background.png'
        : 'assets/images/noLoginControl.png';

    return LayoutBuilder(
      builder: (context, bodySize) => GestureDetector(
        child: Stack(
          children: [
            // Background Image
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(backgroundImage),
                  fit: BoxFit.fill,
                ),
              ),
            ),

            // Blur overlay when not logged in
            if (!isLoggedIn)
              Positioned.fill(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(
                    color: Colors.black.withOpacity(0.5),
                  ),
                ),
              ),

            // Main Content
            Scaffold(
              backgroundColor: Colors.transparent,
              body: SafeArea(
                child: WebviewTestView(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 床体图示
  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;
    final spacing = 20.0.rpx;
    final thirdWidth = 215.rpx;
    final tabCount = 3;
    final tabWidth = screenWidth / tabCount;
    final sideMargin = (tabWidth - thirdWidth) / 2;

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

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 30.rpx),
      child: Stack(
        children: [
          Row(
            children: List.generate(tabCount, (index) {
              return Expanded(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      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': '一键助眠'.tr, 'time': '30:00'},
      {'title': '疲劳缓解'.tr, 'time': '20:00'},
      {'title': '全身放松'.tr, 'time': '20:00'},
      {'title': '背部律动'.tr, 'time': '10:00'},
      {'title': '腿部律动'.tr, 'time': '30:00'},
      {'title': '垂直律动'.tr, 'time': ''},
      {'title': '加热'.tr, 'time': '30:00'},
      {'title': '柔性唤醒'.tr, 'time': 'PM 08:00'},
      {'title': '记忆'.tr, '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'],
                    ),
                  );
                }
              }),
            ),
            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'],
                        ),
                      );
                    }
                  }),
                ),
              );
            }).toList(),
          ],
        ),
      ),
    );
  }

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

    return Container(
      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 {
  final List<RxBool> switchStates = List.generate(9, (index) => false.obs);
}