import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../controllers/translation_middleware_controller.dart';
import '../../../../core/theme/app_colors.dart';

/// 翻译中间层视图
/// 展示四种翻译功能的入口选项
class TranslationMiddlewareView
    extends GetView<TranslationMiddlewareController> {
  const TranslationMiddlewareView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      //primary: false,
      backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50],
      appBar: _buildAppBar(isDarkMode),
      body: _buildBody(isDarkMode),
    );
  }

  /// 构建应用栏
  PreferredSizeWidget _buildAppBar(bool isDarkMode) {
    return AppBar(
      backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.white,
      elevation: 0,
      centerTitle: true,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: isDarkMode ? Colors.white : Colors.black,
          size: 20.sp,
        ),
        onPressed: () => Get.back(),
      ),
      title: Text(
        'interpretation'.tr, // 翻译
        style: TextStyle(
          fontSize: 18.sp,
          fontWeight: FontWeight.w600,
          color: isDarkMode ? Colors.white : Colors.black,
        ),
      ),
    );
  }

  /// 构建主体内容
  Widget _buildBody(bool isDarkMode) {
    return SafeArea(
      child: _buildTranslationOptionsGrid(isDarkMode),
    );
  }

  /// 构建翻译选项网格
  Widget _buildTranslationOptionsGrid(bool isDarkMode) {
    return GridView.builder(
      padding: EdgeInsets.all(20.w), // 将内边距应用于网格内容
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 16.w,
        mainAxisSpacing: 16.h,
        childAspectRatio: 1,
      ),
      itemCount: controller.translationOptions.length,
      itemBuilder: (context, index) {
        final option = controller.translationOptions[index];
        return _buildTranslationOptionCard(option, isDarkMode);
      },
    );
  }

  /// 构建单个翻译选项卡片
  Widget _buildTranslationOptionCard(
    TranslationOption option,
    bool isDarkMode,
  ) {
    final isEnabled = controller.isOptionEnabled(option); // 根据 BLE 连接态控制可用性
    return GestureDetector(
      onTap: () => controller.navigateToTranslationFeature(option),
      child: Container(
        decoration: BoxDecoration(
          // 使用新的 startColor/endColor 构建渐变背景
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              option.startColor.withOpacity(
                isEnabled
                    ? (isDarkMode ? 0.3 : 0.3)
                    : (isDarkMode ? 0.15 : 0.08),
              ),
              option.endColor.withOpacity(
                isEnabled
                    ? (isDarkMode ? 0.3 : 0.3)
                    : (isDarkMode ? 0.15 : 0.08),
              ),
            ],
          ),
          borderRadius: BorderRadius.circular(16.r),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withOpacity(0.3)
                  : Colors.grey.withOpacity(0.1),
              blurRadius: 8,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.fromLTRB(20.w, 28.h, 20.w, 20.h),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              // 图标
              Container(
                width: 60.w,
                height: 60.h,
                decoration: BoxDecoration(
                  color: option.iconBgColor.withOpacity(isEnabled ? 0.2 : 0.05),
                  borderRadius: BorderRadius.circular(16.r),
                ),
                child: Icon(
                  option.icon,
                  size: 32.sp,
                  color: option.iconColor.withOpacity(isEnabled ? 1.0 : 0.5),
                ),
              ),

              const Spacer(),

              // 标题
              Text(
                option.title,
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                  color: (isDarkMode ? Colors.white : Colors.black87)
                      .withOpacity(isEnabled ? 1.0 : 0.5),
                ),
                textAlign: TextAlign.center,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              //SizedBox(height: 8.h),
            ],
          ),
        ),
      ),
    );
  }
}