import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:laki_icu_app/blocs/device_control/device_control_bloc.dart';
import 'package:laki_icu_app/blocs/device_control/device_control_event.dart';
import 'package:laki_icu_app/blocs/device_control/device_control_state.dart';
import 'package:laki_icu_app/models/bo/device_control_bo.dart';

import 'device_control_common.dart';

/// 模式切换面板（外循环/检查灯/照明灯/内循环/蓝光/红光）
class DeviceControlModePanel extends StatelessWidget {
  const DeviceControlModePanel({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DeviceControlBloc, DeviceControlState>(
      buildWhen: (previous, current) =>
          previous.data.circulationMode != current.data.circulationMode ||
          previous.data.lightControl != current.data.lightControl,
      builder: (context, state) {
        final circulationMode = state.data.circulationMode.currentMode;
        final lightControl = state.data.lightControl;
        final items = [
          _ModeItem(
            label: '外循环',
            icon: Icons.sync,
            active: circulationMode == CirculationMode.external,
            event: const DeviceControlCirculationModeChanged(
              CirculationMode.external,
            ),
          ),
          _ModeItem(
            label: '检查灯',
            icon: Icons.light,
            active: lightControl.checkLightOn,
            event: DeviceControlCheckLightSwitchChanged(
              !lightControl.checkLightOn,
            ),
          ),
          _ModeItem(
            label: '照明灯',
            icon: Icons.lightbulb,
            active: lightControl.illuminationOn,
            event: DeviceControlIlluminationLightSwitchChanged(
              !lightControl.illuminationOn,
            ),
          ),
          _ModeItem(
            label: '内循环',
            icon: Icons.autorenew,
            active: circulationMode == CirculationMode.internal,
            event: const DeviceControlCirculationModeChanged(
              CirculationMode.internal,
            ),
          ),
          _ModeItem(
            label: '蓝光',
            icon: Icons.wb_sunny_outlined,
            active: lightControl.blueLightOn,
            event: DeviceControlBlueLightSwitchChanged(
              !lightControl.blueLightOn,
            ),
          ),
          _ModeItem(
            label: '红光',
            icon: Icons.wb_sunny,
            active: lightControl.redLightOn,
            event: DeviceControlRedLightSwitchChanged(
              !lightControl.redLightOn,
            ),
          ),
        ];

        return DeviceControlPanelFrame(
          backgroundAsset: assetPanelLarge,
          padding: EdgeInsets.fromLTRB(30.w, 30.h, 30.w, 30.h),
          child: LayoutBuilder(
            builder: (context, constraints) {
              final horizontalGap = 22.w;
              final verticalGap = 22.h;
              final itemWidth = (constraints.maxWidth - horizontalGap * 2) / 3;
              final itemHeight = (constraints.maxHeight - verticalGap) / 2;

              return Wrap(
                spacing: horizontalGap,
                runSpacing: verticalGap,
                children: [
                  for (final item in items)
                    SizedBox(
                      width: itemWidth,
                      height: itemHeight,
                      child: _ModeButton(
                        label: item.label,
                        icon: item.icon,
                        active: item.active,
                        onTap: () => context.read<DeviceControlBloc>().add(
                              item.event,
                            ),
                      ),
                    ),
                ],
              );
            },
          ),
        );
      },
    );
  }
}

class _ModeButton extends StatelessWidget {
  const _ModeButton({
    required this.label,
    required this.icon,
    this.active = false,
    this.onTap,
  });

  final String label;
  final IconData icon;
  final bool active;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final color = active ? const Color(0xFF45F36F) : const Color(0xFF7DC4EA);
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: onTap,
      child: Container(
        decoration: deviceControlButtonDecoration(
          active: active,
          backgroundAsset: assetArrowButton,
        ),
        padding: EdgeInsets.fromLTRB(12.w, 6.h, 12.w, 16.h),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              top: 28.h,
              child: Icon(icon, color: color, size: 100.w),
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: Text(
                label,
                maxLines: 1,
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: color,
                  fontSize: 26.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ModeItem {
  final String label;
  final IconData icon;
  final bool active;
  final DeviceControlEvent event;

  const _ModeItem({
    required this.label,
    required this.icon,
    required this.event,
    this.active = false,
  });
}
