import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/models/bo/room_bo.dart';
import 'package:smart_hotel_app/utils/deal_utils.dart';

class RoomDetailCard extends StatelessWidget {
  final RoomDetailListBO room;

  const RoomDetailCard({super.key, required this.room});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(28.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(24.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            spacing: 16.w,
            children: [
              Container(
                width: 64.w,
                height: 53.h,
                decoration: BoxDecoration(
                  color: const Color.fromRGBO(219, 234, 254, 1),
                  borderRadius: BorderRadius.circular(12.r),
                ),
                child: Icon(
                  Icons.house,
                  color: const Color.fromRGBO(59, 130, 246, 1),
                  size: 32.sp,
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                spacing: 12.h,
                children: [
                  Row(
                    children: [
                      Text(
                        room.roomBasicInfo.roomNumber,
                        style: TextStyle(
                          fontSize: 36.sp,
                          fontWeight: FontWeight.bold,
                          color: const Color.fromRGBO(31, 41, 55, 1),
                        ),
                      ),
                      SizedBox(width: 16.w),
                      Text(
                        room.roomBasicInfo.roomStatusText,
                        style: TextStyle(
                          fontSize: 28.sp,
                          color: const Color.fromRGBO(59, 130, 246, 1),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    spacing: 12.w,
                    children: [
                      if (room.statusTags.isOccupied)
                        _StatusTag(
                          label: '有人',
                          isActive: room.statusTags.isOccupied,
                        ),
                      if (room.statusTags.powerSupplyStatus)
                        _StatusTag(
                          label: '通电中',
                          isActive: room.statusTags.powerSupplyStatus,
                        ),
                      // _StatusTag(
                      //   label: 'wifi正常',
                      //   isActive: room.statusTags.wifiNormalStatus,
                      // ),
                    ],
                  ),
                ],
              ),
            ],
          ),
          SizedBox(height: 24.h),
          Divider(
            height: 1.h,
            thickness: 0.5,
            color: const Color.fromRGBO(229, 231, 235, 1),
          ),
          SizedBox(height: 24.h),
          // GridView.count(
          //   shrinkWrap: true,
          //   physics: const NeverScrollableScrollPhysics(),
          //   crossAxisCount: 2,
          //   mainAxisSpacing: 16.h,
          //   crossAxisSpacing: 16.w,
          //   children: room.deviceList.map((device) => _DeviceControl(device: device)).toList(),
          // ),
          GridView.count(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            childAspectRatio: 3,
            mainAxisSpacing: 16.h,
            crossAxisSpacing: 16.w,
            children: room.deviceList.map((device) => _DeviceControl(device: device)).toList(),
          ),
        ],
      ),
    );
  }
}

class _StatusTag extends StatelessWidget {
  final String label;
  final bool isActive;

  const _StatusTag({required this.label, required this.isActive});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
      decoration: BoxDecoration(
        color: isActive
            ? const Color.fromRGBO(20, 184, 166, 0.2)
            : const Color.fromRGBO(229, 231, 235, 1),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        spacing: 4.w,
        children: [
          if (isActive)
            Icon(
              Icons.check,
              size: 24.sp,
              color: const Color.fromRGBO(16, 185, 129, 1),
            ),
          Text(
            label,
            style: TextStyle(
              fontSize: 22.sp,
              color: isActive
                  ? const Color.fromRGBO(16, 185, 129, 1)
                  : const Color.fromRGBO(156, 163, 175, 1),
            ),
          ),
        ],
      ),
    );
  }
}

class _DeviceControl extends StatelessWidget {
  final DeviceItemBO device;

  const _DeviceControl({required this.device});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 24.h),
      decoration: BoxDecoration(
        color: const Color.fromRGBO(239, 246, 255, 1),
        borderRadius: BorderRadius.circular(24.r),
      ),
      child: Row(
        children: [
          Icon(
            DealUtils.deviceIcon(device.deviceTypeIcon),
            color: const Color.fromRGBO(59, 130, 246, 1),
            size: 40.sp,
          ),
          SizedBox(width: 16.w),
          Expanded(
              child: Text(device.deviceName,
                style: TextStyle(
                  fontSize: 28.sp,
                  color: const Color.fromRGBO(59, 130, 246, 1),
                  fontWeight: FontWeight.w500,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
          ),
          Text(
            device.paramDisplayText.isNotEmpty ? device.paramDisplayText : device.powerStatusText,
            style: TextStyle(
              fontSize: 26.sp,
              color: device.powerStatus == '1'
                  ? const Color.fromRGBO(16, 185, 129, 1)
                  : const Color.fromRGBO(156, 163, 175, 1),
            ),
          ),
        ],
      ),
    );
  }
}
