import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'dart:math' as math;
import 'package:vbvs_app/common/util/MyUtils.dart';

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

  @override
  State<BackMovementPage> createState() => _BackMovementPageState();
}

class _BackMovementPageState extends State<BackMovementPage> {
  double intensity = 4;
  int selectedTime = 10;

  final List<int> timeOptions = [10, 20, 30];

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, bodysize) {
      final double totalWidth = bodysize.maxWidth - 40.rpx * 2; // 减去左右 padding
      final double spacing = 34.rpx;
      final double buttonHeight = 101.rpx;
      return GestureDetector(
          // onTap: () => FocusScope.of(context).unfocus(),,
          child: Container(
              child: Scaffold(
        appBar: AppBar(
          iconTheme: IconThemeData(color: themeController.currentColor.sc3),
          backgroundColor: const Color(0xFF011C33), // 统一背景色
          automaticallyImplyLeading: false,
          titleSpacing: 0,
          title: SizedBox(
            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(),
                ),
              ],
            ),
          ),
          centerTitle: false,
        ),
        backgroundColor: const Color(0xFF011C33),
        body: Padding(
          padding: EdgeInsets.fromLTRB(0.rpx, 0, 0.rpx, 0),
          child: Column(
            // crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SingleChildScrollView(
                  child: Column(
                children: [
                  SizedBox(height: 30.rpx),
                  Text(
                    '力度调节'.tr,
                    style: TextStyle(color: Colors.grey, fontSize: 30.rpx),
                  ),
                  SizedBox(height: 148.rpx),
                  Text(
                    intensity.toInt().toString(),
                    style: TextStyle(color: Colors.white, fontSize: 160.rpx),
                  ),
                  SizedBox(height: 41.rpx),
                  SizedBox(
                    height: 451.rpx, // 外部容器高度固定
                    child: Stack(
                      children: [
                        // 左边的 强/弱 文本
                        Positioned(
                          left: 0,
                          top: 0,
                          bottom: 0,
                          child: SizedBox(
                            width: 60.rpx,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text('强'.tr,
                                    style: TextStyle(
                                        color: Colors.grey, fontSize: 30.rpx)),
                                Text('弱'.tr,
                                    style: TextStyle(
                                        color: Colors.grey, fontSize: 30.rpx)),
                              ],
                            ),
                          ),
                        ),

                        // 右侧 slider，27.rpx 后居中
                        Positioned(
                          left: 60.rpx - 27.rpx, // 60 是文字宽度，27 是间隔
                          right: 0,
                          top: 0,
                          bottom: 0,
                          child: Center(
                            child: Transform.rotate(
                              angle: -math.pi / 2,
                              child: ConstrainedBox(
                                constraints: BoxConstraints(
                                  minHeight: 451.rpx,
                                  maxHeight: 451.rpx,
                                ),
                                child: SliderTheme(
                                  data: SliderTheme.of(context).copyWith(
                                    trackHeight: 60.rpx,
                                    thumbShape: RoundSliderThumbShape(
                                        enabledThumbRadius: 45.rpx),
                                    overlayShape: const RoundSliderOverlayShape(
                                        overlayRadius: 20),
                                  ),
                                  child: Slider(
                                    value: intensity,
                                    min: 1,
                                    max: 6,
                                    divisions: 7,
                                    activeColor: Colors.cyanAccent,
                                    inactiveColor: Colors.blue.shade900,
                                    onChanged: (value) {
                                      setState(() {
                                        intensity = value;
                                      });
                                    },
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 118.rpx),
                  Padding(
                    padding: EdgeInsets.only(
                        left: 47.rpx), // 👈 控制间隔大小（也可以是 all / symmetric）
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '按摩定时'.tr,
                        style:
                            TextStyle(color: Colors.white70, fontSize: 30.rpx),
                      ),
                    ),
                  ),
                  SizedBox(height: 74.rpx),
                  Padding(
                      padding: EdgeInsets.fromLTRB(40.rpx, 0, 40.rpx, 0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: List.generate(timeOptions.length, (index) {
                          final min = timeOptions[index];
                          final isSelected = selectedTime == min;
                          return SizedBox(
                              height: buttonHeight,
                              child: ElevatedButton(
                                onPressed: () {
                                  setState(() {
                                    selectedTime = min;
                                  });
                                },
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: isSelected
                                      ? Colors.cyanAccent
                                      : Colors.blue.shade900,
                                  foregroundColor:
                                      isSelected ? Colors.black : Colors.white,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(6),
                                  ),
                                ),
                                child: Text('$min分钟'),
                              ));
                        }),
                      )),
                ],
              )),
              Padding(
                padding: EdgeInsets.fromLTRB(30.rpx, 0, 30.rpx,
                    81.rpx), // 👈 控制上方间隔（也可以用 all / symmetric）
                child: OutlinedButton(
                  onPressed: () {
                    setState(() {
                      intensity = 4;
                      selectedTime = 10;
                    });
                  },
                  style: OutlinedButton.styleFrom(
                    side: const BorderSide(color: Color(0XFF74DAE5)),
                    foregroundColor: Colors.cyanAccent,
                    minimumSize: Size(bodysize.maxWidth, 92.rpx),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(6),
                    ),
                  ),
                  child:  Text('恢复到默认设置'.tr),
                ),
              ),
            ],
          ),
        ),
      )));
    });
  }
}