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

import 'package:cc_ui_kit/cc_ui_kit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

class CenterControlArea extends StatelessWidget {
  final double totalWidth;

  const CenterControlArea({super.key, required this.totalWidth});

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

    if (remoteState.isEmergency) {
      return const Column(
        mainAxisSize: MainAxisSize.min,
        children: [EmergencyStopButton(), SizedBox(height: 16)],
      );
    }

    return LayoutBuilder(
      builder: (context, constraints) {
        final double expandedWidth = totalWidth * 0.25;
        final double emergencyStopButtonWidth = constraints.maxWidth * 0.5;

        return Container(
          // 这里不再使用 Row 包装三个 Expanded，而是直接固定宽度
          child: Row(
            //mainAxisSize: MainAxisSize.min, // 极其重要：防止在 spaceBetween 下挤压
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              // 左摇杆 (3份)
              // _buildSliderBox(expandedWidth, "底盘", true),
              SizedBox(
                width: expandedWidth,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    _buildSliderBox(expandedWidth, "底盘", true,context),
                    SizedBox(height: totalWidth * 0.01),
                  ],
                ),
              ),

              // 急停 (2份)
              SizedBox(
                width: emergencyStopButtonWidth,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    EmergencyStopButton(width: emergencyStopButtonWidth),

                    SizedBox(height: totalWidth * 0.05),

                    const Text(
                      '双击空白处切换视角',
                      style: TextStyle(fontSize: 8, color: Colors.grey),
                    ),
                  ],
                ),
              ),

              // 右摇杆 (3份)
              // _buildSliderBox(expandedWidth, "备用", false),
              SizedBox(
                width: expandedWidth,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [_buildSliderBox(expandedWidth, "割刀", false,context)],
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildSliderBox(double boxWidth, String label, bool isLeft,BuildContext context) {
    return SizedBox(
      width: boxWidth,
      child: Center(
        child: SizedBox(
          width: boxWidth * 0.6,
          height: boxWidth * 0.6 * 3,
          child: CCExpandSlider(
            label: label,
            svgStart: "assets/svgs/remote_up.svg",
            svgCenter: switch (label) {
              "割刀" => "assets/svgs/remote_scissors.svg",
              "底盘" => "assets/svgs/remote_layers.svg",
              _ => "assets/svgs/remote_layers.svg", // 下划线表示默认值
            },
            svgEnd: "assets/svgs/remote_down.svg",
            onStart: () => _handleSliderAction(label, "start", context),
            onCenter: () => _handleSliderAction(label, "center", context),
            onEnd: () => debugPrint("$label end"),
            iconSize: boxWidth * 0.6 * 0.35,
          ),
        ),
      ),
    );
  }

  // 🔥 新增：统一的业务逻辑分发方法
  void _handleSliderAction(String label, String action, BuildContext context) {
    debugPrint('🎯 [Slider 业务] label: $label, action: $action');

    // 🔥 根据 label 区分不同的设备
    switch (label) {
      case "底盘":
        _handleChassisAction(action, context);
        break;
      case "割刀":
        _handleMowerAction(action, context);
        break;
      default:
        debugPrint('⚠️ 未知的 label: $label');
    }
  }

  // 🔥 底盘的业务逻辑（左滑块）
  void _handleChassisAction(String action, BuildContext context) {
    final cubit = context.read<RemoteControlCubit>();

    switch (action) {
      case "start":
        debugPrint('⬆️ 底盘 - 向上（例如：前进）');
        // TODO: 发送底盘前进指令
        // cubit.sendChassisCommand(ChassisCommand.forward);
        break;
      case "center":
        debugPrint('️ 底盘 - 中间（例如：停止）');
        // TODO: 发送底盘停止指令
        // cubit.sendChassisCommand(ChassisCommand.stop);
        break;
      case "end":
        debugPrint('⬇️ 底盘 - 向下（例如：后退）');
        // TODO: 发送底盘后退指令
        // cubit.sendChassisCommand(ChassisCommand.backward);
        break;
    }
  }

  // 🔥 割刀的业务逻辑（右滑块）
  void _handleMowerAction(String action, BuildContext context) {
    final cubit = context.read<RemoteControlCubit>();

    switch (action) {
      case "start":
        debugPrint('⬆️ 割刀 - 向上（例如：抬刀）');
        // TODO: 发送抬刀指令
        // cubit.sendMowerCommand(MowerCommand.lift);
        break;
      case "center":
        debugPrint('⏹️ 割刀 - 中间（例如：保持）');
        // TODO: 发送保持指令
        // cubit.sendMowerCommand(MowerCommand.hold);
        break;
      case "end":
        debugPrint('⬇️ 割刀 - 向下（例如：降刀）');
        // TODO: 发送降刀指令
        // cubit.sendMowerCommand(MowerCommand.lower);
        break;
    }
  }
}