nomo/lib/app/modules/deviceauth/widgets/device_card.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:nomo/app/widgets/click_opacity.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';

import '../../../../config/translations/strings_enum.dart';
import '../../../constants/iconfont/iconfont.dart';
import '../../../widgets/infintte_rotate.dart';
import '../controllers/deviceauth_controller.dart';

/// 设备卡片组件
class DeviceCard extends StatelessWidget {
  final DeviceInfo device;
  final VoidCallback? onRelieve;
  final bool showRelieveButton;

  const DeviceCard({
    super.key,
    required this.device,
    this.onRelieve,
    this.showRelieveButton = true,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(14.w),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Get.reactiveTheme.dividerColor, // 颜色
            width: 1.w, // 宽度
          ),
        ),
      ),
      child: Row(
        children: [
          // 设备图标
          Container(
            width: 30.w,
            height: 30.w,
            decoration: BoxDecoration(
              color: _getDeviceIconBgColor(device.type),
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Icon(
              _getDeviceIcon(device.type),
              size: 20.w,
              color: Colors.white,
            ),
          ),

          10.horizontalSpace,

          // 设备信息
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  device.name,
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500,
                    color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                    height: 1.4,
                  ),
                ),
                if (device.uid != null)
                  Text(
                    device.uid!,
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: Get.reactiveTheme.hintColor,
                      height: 1.4,
                    ),
                  ),
                if (device.date != null)
                  Text(
                    device.date!,
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: Get.reactiveTheme.hintColor,
                      height: 1.4,
                    ),
                  ),
              ],
            ),
          ),

          // Relieve按钮
          if (showRelieveButton)
            ClickOpacity(
              onTap: onRelieve,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 4.w),
                decoration: BoxDecoration(
                  color: Get.reactiveTheme.primaryColor,
                  borderRadius: BorderRadius.circular(12.r),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(IconFont.icon11, size: 20.w, color: Colors.white),
                    SizedBox(width: 4.w),
                    Text(
                      Strings.relieve.tr,
                      style: TextStyle(
                        fontSize: 12.sp,
                        height: 1.7,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }

  /// 获取设备图标
  IconData _getDeviceIcon(DeviceTypeEnum type) {
    switch (type) {
      case DeviceTypeEnum.ios:
        return IconFont.icon45;
      case DeviceTypeEnum.android:
        return IconFont.icon47;
      case DeviceTypeEnum.windows:
        return Icons.laptop_windows;
      case DeviceTypeEnum.mac:
        return Icons.laptop_mac;
    }
  }

  /// 获取设备图标背景色
  Color _getDeviceIconBgColor(DeviceTypeEnum type) {
    switch (type) {
      case DeviceTypeEnum.ios:
        return Get.reactiveTheme.shadowColor; // iOS蓝色
      case DeviceTypeEnum.android:
        return Get.reactiveTheme.shadowColor; // Android绿色
      case DeviceTypeEnum.windows:
        return const Color(0xFF0078D4); // Windows蓝色
      case DeviceTypeEnum.mac:
        return const Color(0xFF5E5CE6); // Mac紫色
    }
  }
}

/// 等待激活设备卡片
class AwaitingActivationCard extends StatelessWidget {
  final bool showLoadingIcon;

  const AwaitingActivationCard({super.key, this.showLoadingIcon = false});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(14.w),
      child: Row(
        children: [
          // 设备图标 - 暗灰色
          Container(
            width: 30.w,
            height: 30.w,
            decoration: BoxDecoration(
              color: Get.reactiveTheme.cardColor,
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Icon(
              IconFont.icon31,
              size: 20.w,
              color: Get.reactiveTheme.hintColor,
            ),
          ),

          10.horizontalSpace,

          // 等待激活文字
          Expanded(
            child: Text(
              showLoadingIcon
                  ? Strings.configureAuthorizedDevices.tr
                  : Strings.awaitingActivation.tr,
              style: TextStyle(
                fontSize: 13.sp,
                color: Get.reactiveTheme.hintColor,
                height: 1.4,
              ),
            ),
          ),

          if (showLoadingIcon) const InfiniteRotateIcon(),
        ],
      ),
    );
  }
}