import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:laki_icu_app/models/bo/monitoring_bo.dart';

class MonitoringMetricCard extends StatelessWidget {
  final MonitoringMetricBO metric;

  /// 开关状态
  final bool switchValue;

  /// 开关切换回调
  final ValueChanged<bool>? onSwitchToggle;

  /// 卡片点击回调
  final VoidCallback? onTap;

  const MonitoringMetricCard({
    super.key,
    required this.metric,
    this.switchValue = false,
    this.onSwitchToggle,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final displayLabel = _displayLabel(metric.label);
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.opaque,
      child: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('lib/assets/monitoring/box_bg_325x372.png'),
            fit: BoxFit.fill,
          ),
          // border: BoxBorder.all(width: 1.w,color: Colors.red)
        ),
        padding: EdgeInsets.only(left: 10.w, right: 10.w, top: 54.h),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                SizedBox(width: 32.w),
                Expanded(
                  flex: 3,
                  child: Text(
                    displayLabel,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 28.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: FlutterSwitch(
                      width: 60.w,
                      height: 30.h,
                      value: switchValue,
                      onToggle: onSwitchToggle ?? (_) {},
                      activeColor: const Color(0xFF75C1DD),
                      inactiveColor: const Color(0xFF0A1B34),
                      toggleSize: 22.w,
                      padding: 4.w,
                    ),
                  ),
                ),
              ],
            ),
            // const Spacer(),
            Container(
              padding: EdgeInsets.only(left: 32.w, top: 24.h),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    metric.value,
                    style: TextStyle(
                      color: const Color(0xFF9DF5FF),
                      fontSize: 90.sp,
                      height: 1,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(width: 18.w),
                  Padding(
                    padding: EdgeInsets.only(bottom: 3.h),
                    child: Text(
                      metric.unit,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 22.h),
            Container(
              width: 220.w,
              margin: EdgeInsets.only(
                left: 32.w,
              ),
              child: Stack(
                clipBehavior: Clip.none,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '设定24${metric.unit}',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24.sp,
                        ),
                      ),
                      Container(
                        height: 5.h,
                        margin: EdgeInsets.only(top: 18.h),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(3.r),
                          gradient: const LinearGradient(
                            colors: [Color(0xFF20E5FF), Color(0x0020E5FF)],
                          ),
                        ),
                      ),
                    ],
                  ),
                  Positioned(
                    right: -65.w,
                    top: -20.h,
                    child: Image.asset(
                      _iconAsset(metric.label),
                      width: 102.w,
                      height: 102.w,
                      fit: BoxFit.contain,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 2.w),
              child: Image.asset(
                'lib/assets/monitoring/box_bottom_char.png',
                // width: 140.w,
                // height: 60.w,
                fit: BoxFit.contain,
              ),
            )
          ],
        ),
      ),
    );
  }

  String _displayLabel(String label) {
    if (label.contains('二氧化碳')) return 'CO₂浓度';
    return label;
  }

  String _iconAsset(String label) {
    if (label.contains('温度')) {
      return 'lib/assets/monitoring/cabin_temperature.png';
    }
    if (label.contains('湿度')) {
      return 'lib/assets/monitoring/cabin_humidity.png';
    }
    if (label.contains('氧气')) {
      return 'lib/assets/monitoring/oxygen_concentration.png';
    }
    return 'lib/assets/monitoring/carbon_dioxide_concentration.png';
  }
}
