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(
                      '背部律动',
                      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(
                        '力度调节',
                        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('强',
                                        style: TextStyle(
                                            color: Colors.grey,
                                            fontSize: 30.rpx)),
                                    Text('弱',
                                        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(
                            '按摩定时',
                            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: const Text('恢复到默认设置'),
                    ),
                  ),
                ],
              ),
            ),
          )));
    });
  }
}
