import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:starwork_flutter/common/constant/app_colors.dart';
import 'package:starwork_flutter/common/constant/app_support_device_type.dart';
import 'package:starwork_flutter/common/constant/app_view_parameter_keys.dart';
import 'package:starwork_flutter/common/widgets/custome_app_bar_wdiget.dart';
import 'package:starwork_flutter/extension/function_extension.dart';
import 'package:starwork_flutter/routes/app_routes.dart';
import 'package:starwork_flutter/views/device/deviceManage/device_manage_controller.dart';

class DeviceManageView extends GetView<DeviceManageController> {
  const DeviceManageView({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Scaffold(
        backgroundColor: AppColors.scaffoldBackgroundColor,
        appBar: CustomAppBarWidget(
          title: '设备管理'.tr,
          showBackButton: false,
        ),
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(
              vertical: 10.h,
            ),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 10.w,
                    vertical: 10.h,
                  ),
                  decoration: const BoxDecoration(
                    color: Colors.white,
                  ),
                  child: Column(
                    children: [
                      _buildSearchBar(),
                      SizedBox(
                        height: 10.h,
                      ),
                      _buildLabelRow(),
                    ],
                  ),
                ),
                // 主区域：左侧菜单 + 右侧设备列表（占满剩余空间）
                Expanded(
                  // ✅ 关键：让主内容区域占满剩余高度
                  child: _buildMainArea(),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextButton(
                      onPressed: () {
                        Get.toNamed(AppRoutes.searchDevice);
                      },
                      child: Text(
                        '添加设备',
                        style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w500,
                          fontSize: 16.sp,
                        ),
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        Get.toNamed(
                          AppRoutes.deviceRemoveDevice,
                          arguments: {
                            AppViewParameterKeys.deviceList: controller.deviceList,
                          },
                        );
                      },
                      child: Text(
                        '删除设备',
                        style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w500,
                          fontSize: 16.sp,
                        ),
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        controller.showFunctionNotOpen();
                      },
                      child: Text(
                        '更多管理',
                        style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w500,
                          fontSize: 16.sp,
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _buildSearchBar() {
    return TextField(
      controller: controller.searchInputController,
      textInputAction: TextInputAction.search,
      decoration: InputDecoration(
        hintText: '请输入设备名称'.tr,
        hintStyle: TextStyle(
          fontSize: 14.sp,
          color: const Color(0xFF999999),
        ),
        prefixIcon: const Icon(
          Icons.search,
          color: Color(0xFF999999),
        ),
        filled: true,
        // 启用背景填充
        fillColor: const Color(0xFFf0f0f0),
        // 灰色背景（可调整色值）
        border: InputBorder.none,
        // 设置内边距
        contentPadding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.blue,
            width: 1.5,
          ),
          borderRadius: BorderRadius.circular(8.0.r),
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.circular(8.0.r),
        ),
      ),
    );
  }

  _buildLabelRow() {
    return Obx(
      () => Row(
        children: [
          GestureDetector(
            onTap: () {
              controller.changeStatusFilter(0);
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
              decoration: BoxDecoration(
                color: controller.selectedStatusIndex == 0 ? Colors.black : Colors.grey[300],
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Text(
                '全部状态'.tr,
                style: TextStyle(
                  fontSize: 12.sp,
                  color: controller.selectedStatusIndex == 0 ? Colors.white : Colors.grey[500],
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          SizedBox(
            width: 10.w,
          ),
          GestureDetector(
            onTap: () {
              controller.changeStatusFilter(1);
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
              decoration: BoxDecoration(
                color: controller.selectedStatusIndex == 1 ? Colors.black : Colors.grey[300],
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Text(
                '在线(${controller.onlineDeviceCount.value})'.tr,
                style: TextStyle(
                  fontSize: 12.sp,
                  color: controller.selectedStatusIndex == 1 ? Colors.white : Colors.grey[500],
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          SizedBox(
            width: 10.w,
          ),
          GestureDetector(
            onTap: () {
              controller.changeStatusFilter(2);
            },
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.h),
              decoration: BoxDecoration(
                color: controller.selectedStatusIndex == 2 ? Colors.black : Colors.grey[300],
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Text(
                '离线(${controller.offlineDeviceCount.value})'.tr,
                style: TextStyle(
                  fontSize: 12.sp,
                  color: controller.selectedStatusIndex == 2 ? Colors.white : Colors.grey[500],
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  _buildMainArea() {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: _buildLeftOptionsList(), // 左侧列表
        ),
        Expanded(
          flex: 4,
          child: _buildRightDeviceList(), // 右侧设备
        ),
      ],
    );
  }

  _buildLeftOptionsList() {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: ListView.builder(
        itemCount: AppSupportDeviceType.allTypes.length,
        itemBuilder: (context, index) {
          var deviceType = AppSupportDeviceType.allTypes[index];
          return Obx(
            () => GestureDetector(
              onTap: () {
                controller.selectedDeviceType.value = deviceType;
              },
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 10.h),
                decoration: BoxDecoration(
                  color: controller.selectedDeviceType.value == deviceType
                      ? AppColors.scaffoldBackgroundColor
                      : Colors.white,
                ),
                alignment: Alignment.center,
                child: Text(
                  '${deviceType.label}(${controller.deviceList.length})',
                  style: TextStyle(
                    fontSize: 10.sp,
                    color: Colors.black,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  _buildRightDeviceList() {
    return Obx(
      () => Container(
        padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // 每行两列
            crossAxisSpacing: 6.w, // 列间距
            mainAxisSpacing: 6.h, // 行间距
            childAspectRatio: 1.6, // 宽高比，可根据需要调整
          ),
          itemCount: controller.filteredDeviceList.length,
          itemBuilder: (context, index) {
            final lock = controller.filteredDeviceList[index];
            return GestureDetector(
              onTap: () {
                Get.toNamed(AppRoutes.deviceSetting, arguments: {
                  AppViewParameterKeys.lockInfo: lock.toJson(),
                });
              },
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8.r)),
                ),
                padding: EdgeInsets.symmetric(
                  horizontal: 10.w,
                ),
                alignment: Alignment.centerLeft,
                child: Obx(
                  () => Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      if (controller.selectedDeviceType.value.iconImagePath != null)
                        Image(
                          image: AssetImage(controller.selectedDeviceType.value.iconImagePath!),
                          width: 26.w,
                          height: 26.w,
                          fit: BoxFit.contain,
                          gaplessPlayback: true,
                          // 防止闪烁
                          filterQuality: FilterQuality.medium,
                          // 优化过滤质量
                          errorBuilder: (context, error, stackTrace) {
                            return Icon(
                              Icons.image_not_supported,
                              size: 26.sp,
                              color: Colors.grey,
                            );
                          },
                        ),
                      SizedBox(
                        height: 6.h,
                      ),
                      Text(
                        lock.lockName,
                        style: TextStyle(
                          fontSize: 11.sp,
                          fontWeight: FontWeight.w500,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      SizedBox(
                        height: 4.h,
                      ),
                      Text(
                        lock.network?.isOnline == 1 ? '在线' : '离线',
                        style: TextStyle(
                          color: lock.network?.isOnline == 1 ? Colors.green : Colors.grey,
                          fontSize: 10.sp,
                          fontWeight: FontWeight.w500,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}