import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:laki_icu_app/models/bo/monitoring_bo.dart';
import 'package:laki_icu_app/utils/bluetooth/index.dart';

typedef OnMenuItemTap = Function(String menuId);

class MonitoringBottomMenu extends StatelessWidget {
  final List<MonitoringMenuItemBO> menuItems;
  final String? selectedMenuId;
  final OnMenuItemTap? onMenuItemTap;

  const MonitoringBottomMenu({
    super.key,
    required this.menuItems,
    this.selectedMenuId,
    this.onMenuItemTap,
  });

  @override
  Widget build(BuildContext context) {
    // 将菜单项分成左侧、TSAAS特殊项、右侧
    final leftItems = menuItems.where((item) => !item.isTsaas).take(4).toList();
    final tsaasItem = menuItems.firstWhere((item) => item.isTsaas);
    final rightItems = menuItems.where((item) => !item.isTsaas).skip(4).toList();

    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('lib/assets/monitoring/bottom_menu_bg.png'),
          fit: BoxFit.fill,
        ),
      ),
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 12.h),
      child: Stack(
        children: [
          Container(
            height: 100.h,
            margin: EdgeInsets.only(top: 50.h),
            decoration: BoxDecoration(
              // border: Border.all(
              //   width: 1.w,
              //   color: Colors.red
              // )
            ),
            child: Row(
                children: [
                    // 左侧4个菜单项
                    ...leftItems.map((item) => _buildMenuItem(item)).toList(),

                    // 中间占位区域（TSAAS品牌部分通过Stack叠加）
                    const Spacer(),

                    // 右侧3个菜单项（包含TSAAS按钮）
                    _buildMenuItemTSAAS(tsaasItem),
                    ...rightItems.map((item) => _buildMenuItem(item)).toList(),
                  ],
                ),
          ),
          
          
          // 中间的TSAAS品牌标识
          // _buildBrandCenter(),
        ],
      ),
    );
  }


  Widget _buildMenuItemTSAAS(MonitoringMenuItemBO item) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      child: GestureDetector(
        onTap: () {
          debugPrint('[MonitoringBottomMenu] 点击菜单: ${item.id} (${item.title})');
          onMenuItemTap?.call(item.id);
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StreamBuilder<BluetoothConnectionStatus>(
              stream: appBluetoothManager.stateStream,
              initialData: appBluetoothManager.status,
              builder: (context, snapshot) {
                final status = snapshot.data;
                final isActive =
                    status == BluetoothConnectionStatus.connectedReady ||
                        status == BluetoothConnectionStatus.active;
                return SizedBox(
                  width: 167.w,
                  height: 62.h,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 180),
                    padding: EdgeInsets.symmetric(
                      horizontal: isActive ? 7.w : 0,
                      vertical: isActive ? 4.h : 0,
                    ),
                    decoration: isActive
                        ? BoxDecoration(
                            color: const Color(0xFF063D36)
                                .withValues(alpha: 0.22),
                            borderRadius: BorderRadius.circular(32.r),
                            boxShadow: [
                              BoxShadow(
                                color: const Color(0xFF39FF88)
                                    .withValues(alpha: 0.18),
                                blurRadius: 12.w,
                                spreadRadius: 1.w,
                              ),
                            ],
                          )
                        : null,
                    child: ColorFiltered(
                      colorFilter: isActive
                          ? const ColorFilter.mode(
                              Color(0xFF8DFFCB),
                              BlendMode.srcATop,
                            )
                          : const ColorFilter.mode(
                              Colors.transparent,
                              BlendMode.dst,
                            ),
                      child: Image.asset(
                        item.iconPath,
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                );
              },
            ),

          ],
        ),
      ),
    );
  }

  Widget _buildMenuItem(MonitoringMenuItemBO item) {
    final isSelected = selectedMenuId == item.id;

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      child: GestureDetector(
        onTap: () {
          debugPrint('[MonitoringBottomMenu] 点击菜单: ${item.id} (${item.title})');
          onMenuItemTap?.call(item.id);
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 图标
            Container(
              width: 62.w,
              height: 62.h,
              child: Image.asset(
                item.iconPath,
                fit: BoxFit.contain,
              ),
            ),
            SizedBox(height: 6.h),
            // 文字
            Text(
              item.title,
              style: TextStyle(
                color: isSelected
                    ? const Color(0xFF00FFFF)
                    : const Color(0xB3FFFFFF),
                fontSize: 20.sp,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildBrandCenter() {
    return Center(
      child: Container(
        height: 72.h,
        constraints: BoxConstraints(minWidth: 260.w),
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF1A4B6F),
              Color(0xFF0A1F30),
            ],
          ),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(32.w),
            topRight: Radius.circular(32.w),
          ),
          border: Border(
            left: BorderSide(color: const Color(0xFF206090), width: 1.w),
            right: BorderSide(color: const Color(0xFF206090), width: 1.w),
            top: BorderSide(color: const Color(0xFF206090), width: 1.w),
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '加邦TSAAS',
              style: TextStyle(
                color: const Color(0xFF00FFFF),
                fontSize: 16.sp,
                fontWeight: FontWeight.bold,
                letterSpacing: 1.2,
              ),
            ),
            Text(
              '动物医疗监护舱',
              style: TextStyle(
                color: Colors.white.withValues(alpha: 0.9),
                fontSize: 14.sp,
                fontWeight: FontWeight.w400,
                letterSpacing: 0.8,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
