flutterApp/lib/features/remote_control/presentation/widgets/emergency_stop_button.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';

import '../bloc/remote_control_cubit.dart';

class EmergencyStopButton extends StatefulWidget {
  final double width;
  const EmergencyStopButton({
    Key? key,
    this.width = 120,
  }) : super(key: key);

  @override
  State<EmergencyStopButton> createState() => _EmergencyStopButtonState();
}

class _EmergencyStopButtonState extends State<EmergencyStopButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _progressController;
  bool _isPressing = false;

  @override
  void initState() {
    super.initState();
    _progressController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );

    // 添加监听器，确保动画值变化时重建 UI
    _progressController.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    _progressController.dispose();
    super.dispose();
  }

  void _resetProgress() {
    setState(() => _isPressing = false);
    _progressController.stop();
    _progressController.value = 0;
  }

  @override
  Widget build(BuildContext context) {
    final isEmergencyActive = context
        .watch<RemoteControlCubit>()
        .state
        .isEmergency;

    final width = widget.width * 0.65;
    final double indicatorSize = width + 20;

    return SizedBox(
      width: indicatorSize,
      height: indicatorSize,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 进度环 - 只在按压时显示
          AnimatedOpacity(
            opacity: _isPressing ? 1.0 : 0.0,
            duration: const Duration(milliseconds: 200),
            child: SizedBox(
              width: indicatorSize,
              height: indicatorSize,
              child: CircularProgressIndicator(
                value: _progressController.value,
                strokeWidth: 6,
                color: Colors.red.withOpacity(0.9),
                backgroundColor: Colors.red.withValues(alpha: 0.2),
              ),
            ),
          ),

          // 按钮主体
          GestureDetector(
            onTap: () {
              debugPrint('🔴 [点击] 触发急停');
              if (!isEmergencyActive) {
                context.read<RemoteControlCubit>().updateEmergency(true);
                HapticFeedback.heavyImpact();
              }
            },
            onLongPressStart: (_) {
              debugPrint('🔴 [长按开始] isEmergency=$isEmergencyActive');
              if (isEmergencyActive && !_isPressing) {
                setState(() => _isPressing = true);
                debugPrint('🔴 [开始动画] 从 0 开始');
                _progressController.reset();
                _progressController.forward().then((_) {
                  debugPrint('🔴 [动画完成] _isPressing=$_isPressing');
                  if (_isPressing && mounted) {
                    debugPrint('✅ [解除急停] 执行');
                    context.read<RemoteControlCubit>().updateEmergency(false);
                    HapticFeedback.vibrate();
                    setState(() => _isPressing = false);
                  }
                });
              }
            },
            onLongPressEnd: (_) {
              debugPrint('🔴 [长按结束]');
              if (_isPressing) {
                _resetProgress();
              }
            },
            onLongPressCancel: () {
              debugPrint('🔴 [长按取消]');
              if (_isPressing) {
                _resetProgress();
              }
            },
            child: Container(
              width: width,
              height: width,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: isEmergencyActive
                    ? Colors.red.withOpacity(0.5)
                    : const Color(0x80C53030),
                boxShadow: isEmergencyActive
                    ? [
                  BoxShadow(
                    color: Colors.red.withValues(alpha: 0.5),
                    blurRadius: 20,
                  ),
                ]
                    : [],
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SvgPicture.asset(
                    'assets/svgs/remote_alert.svg',
                    width: width * 0.4,
                    color: Colors.white.withValues(alpha: 0.5),
                  ),
                  const SizedBox(height: 6),
                  Text(
                    isEmergencyActive ? "急停中" : "急停",
                    style: TextStyle(
                      color: Colors.white.withValues(alpha: 0.5),
                      fontSize: 14,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}