puzzleweave/lib/settings/settings_dialog.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:image_puzzle/models/items.dart';
import 'package:image_puzzle/play/board_play.dart';
import 'package:image_puzzle/settings/settings_controller.dart';
import 'package:image_puzzle/skin/skin.dart';
import 'package:image_puzzle/utils/mybutton.dart';
import 'package:provider/provider.dart';

class SettingsDialog extends StatefulWidget {
  final ListItem? item;
  final bool showReturn;
  final bool showRestart;

  const SettingsDialog({super.key, required this.showReturn, required this.showRestart, required this.item});

  @override
  State<StatefulWidget> createState() => _SettingDialogState();

  static PageRouteBuilder buildRoute({bool showReturn = false, bool showRestart = false, ListItem? item}) {
    return PageRouteBuilder(
      opaque: false, // 不遮盖原来的图层
      pageBuilder: (context, animation, secondaryAnimation) {
        return SettingsDialog(showReturn: showReturn, showRestart: showRestart, item: item);
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(opacity: animation, child: child);
      },
    );
  }
}

class _SettingDialogState extends State<SettingsDialog> {
  @override
  Widget build(BuildContext context) {
    final settings = context.watch<SettingsController>();
    Widget gap = const SizedBox(height: 10);
    // 背景色（开启/关闭状态）
    const activeBgColor = Colors.white;
    const inactiveBgColor = Color.fromARGB(255, 205, 195, 195);
    // 图标颜色（固定，与背景形成对比）
    final iconColor = SkinHelper.slotBorderColor;

    return Scaffold(
      // backgroundColor: SkinHelper.coreBgColor,
      backgroundColor: Colors.black.withAlpha(128),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            const double maxContainerWidth = 500; // 设定一个对话框最大宽度，避免在pad上显示过宽过大不好看
            final containerWidth = min(constraints.biggest.shortestSide * 0.75, maxContainerWidth);
            final buttonWidth = containerWidth * 0.8;
            return Container(
              width: containerWidth,
              decoration: BoxDecoration(color: SkinHelper.coreBgColor, borderRadius: const BorderRadius.all(Radius.circular(16))),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 标题栏（关闭按钮 + 标题）
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                        icon: const Icon(Icons.close_rounded, color: Colors.white),
                        onPressed: () => Navigator.pop(context),
                      ),
                      const Text(
                        '设置',
                        style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(width: 48), // 占位，与左侧关闭按钮平衡
                    ],
                  ),
                  gap,
                  gap,
                  // 重新开始按钮
                  if (widget.showRestart)
                    MyElevatedButton(
                      onPressed: () {
                        PageRouteBuilder? pageRouteBuilder = BoardPlay.buildRoute(widget.item!);
                        Navigator.pop(context);
                        Navigator.pushReplacement(context, pageRouteBuilder);
                      },
                      width: buttonWidth,
                      borderRadius: BorderRadius.circular(20),
                      gradient: const LinearGradient(colors: [Colors.white, Colors.white]),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.restart_alt_rounded, size: 24, weight: 600, color: SkinHelper.slotBorderColor),
                          const SizedBox(width: 5),
                          Text('重新开始', style: TextStyle(color: SkinHelper.slotBorderColor, fontSize: 18)),
                        ],
                      ),
                    ),
                  if (widget.showReturn) gap,
                  if (widget.showReturn) gap,
                  // 回到主页按钮
                  if (widget.showReturn)
                    MyElevatedButton(
                      onPressed: () {
                        Navigator.pop(context);
                        Navigator.pop(context);
                      },
                      width: buttonWidth,
                      borderRadius: BorderRadius.circular(20),
                      gradient: const LinearGradient(colors: [Colors.white, Colors.white]),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.arrow_back, size: 24, weight: 600, color: SkinHelper.slotBorderColor),
                          const SizedBox(width: 5),
                          Text('回到主页', style: TextStyle(color: SkinHelper.slotBorderColor, fontSize: 18)),
                        ],
                      ),
                    ),
                  gap,
                  gap,
                  gap,
                  // 三个设置项（用ValueListenableBuilder监听状态变化）
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        // 1. 背景音乐设置（监听music状态）
                        ValueListenableBuilder<bool>(
                          valueListenable: settings.music, // 监听music的变化
                          builder: (context, isMusicOn, child) {
                            // 状态变化时，自动重建此按钮
                            return _buildSettingButton(
                              icon: isMusicOn ? Icons.music_note : Icons.music_off,
                              bgColor: isMusicOn ? activeBgColor : inactiveBgColor,
                              iconColor: iconColor,
                              onPressed: () => settings.toggleMusic(),
                              tooltip: isMusicOn ? "关闭背景音乐" : "开启背景音乐",
                            );
                          },
                        ),
                        // 2. 音效设置（监听sound状态）
                        ValueListenableBuilder<bool>(
                          valueListenable: settings.sound, // 监听sound的变化
                          builder: (context, isSoundOn, child) {
                            return _buildSettingButton(
                              icon: isSoundOn ? Icons.volume_up : Icons.volume_off,
                              bgColor: isSoundOn ? activeBgColor : inactiveBgColor,
                              iconColor: iconColor,
                              onPressed: () => settings.toggleSound(),
                              tooltip: isSoundOn ? "关闭音效" : "开启音效",
                            );
                          },
                        ),
                        // 3. 震动设置（监听vibrate状态）
                        ValueListenableBuilder<bool>(
                          valueListenable: settings.vibrate, // 监听vibrate的变化
                          builder: (context, isVibrateOn, child) {
                            return _buildSettingButton(
                              icon: isVibrateOn ? Icons.vibration : Icons.crop_portrait,
                              bgColor: isVibrateOn ? activeBgColor : inactiveBgColor,
                              iconColor: iconColor,
                              onPressed: () => settings.toggleVibrate(),
                              tooltip: isVibrateOn ? "关闭震动" : "开启震动",
                            );
                          },
                        ),
                      ],
                    ),
                  ),
                  gap,
                  gap,
                  gap,
                ],
              ),
            );
          },
        ),
      ),
    );
  }

  // 封装设置项按钮（无需额外key，由ValueListenableBuilder保证重绘）
  Widget _buildSettingButton({
    required IconData icon,
    required Color bgColor,
    required Color iconColor,
    required VoidCallback onPressed,
    required String tooltip,
  }) {
    return InkWell(
      // 圆形点击区域
      borderRadius: BorderRadius.circular(30),
      onTap: onPressed,
      child: Container(
        width: 56,
        height: 56,
        decoration: BoxDecoration(color: bgColor, shape: BoxShape.circle),
        child: Icon(icon, size: 28, color: iconColor),
      ),
    );
  }
}