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(
      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(
        'translationServices'.tr, // 翻译服务
        style: TextStyle(
          fontSize: 20.sp,
          fontWeight: FontWeight.bold,
          color: isDarkMode ? Colors.white : Colors.black,
        ),
      ),
    );
  }

  /// 构建主体内容
  Widget _buildBody(bool isDarkMode) {
    return SafeArea(
      child: Padding(
        padding: EdgeInsets.all(20.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 页面标题和描述
            // _buildHeader(isDarkMode),
            // SizedBox(height: 30.h),

            // 翻译功能选项网格
            Expanded(
              child: _buildTranslationOptionsGrid(isDarkMode),
            ),
          ],
        ),
      ),
    );
  }

  /// 构建页面头部
  Widget _buildHeader(bool isDarkMode) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'chooseTranslationService'.tr, // 选择翻译服务
          style: TextStyle(
            fontSize: 24.sp,
            fontWeight: FontWeight.bold,
            color: isDarkMode ? Colors.white : Colors.black87,
          ),
        ),
        SizedBox(height: 8.h),
        Text(
          'translationServiceDescription'.tr, // 选择适合您需求的翻译功能
          style: TextStyle(
            fontSize: 16.sp,
            color: isDarkMode ? Colors.grey[300] : Colors.grey[600],
            height: 1.4,
          ),
        ),
      ],
    );
  }

  /// 构建翻译选项网格
  Widget _buildTranslationOptionsGrid(bool isDarkMode) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 16.w,
        mainAxisSpacing: 16.h,
        childAspectRatio: 0.85,
      ),
      itemCount: controller.translationOptions.length,
      itemBuilder: (context, index) {
        final option = controller.translationOptions[index];
        return _buildTranslationOptionCard(option, isDarkMode);
      },
    );
  }

  /// 构建单个翻译选项卡片
  Widget _buildTranslationOptionCard(
    TranslationOption option,
    bool isDarkMode,
  ) {
    return GestureDetector(
      onTap: () => controller.navigateToTranslationFeature(option),
      child: Container(
        decoration: BoxDecoration(
          color: isDarkMode ? AppColors.cardBackground : Colors.white,
          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, 2),
            ),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.all(20.w),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 图标
              Container(
                width: 60.w,
                height: 60.h,
                decoration: BoxDecoration(
                  color: Color(option.iconColor).withOpacity(0.1),
                  borderRadius: BorderRadius.circular(16.r),
                ),
                child: Icon(
                  option.icon,
                  size: 32.sp,
                  color: Color(option.iconColor),
                ),
              ),
              SizedBox(height: 16.h),

              // 标题
              Text(
                controller.getLocalizedTitle(option),
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                  color: isDarkMode ? Colors.white : Colors.black87,
                ),
                textAlign: TextAlign.center,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(height: 8.h),

              // 描述
              Text(
                controller.getLocalizedDescription(option),
                style: TextStyle(
                  fontSize: 12.sp,
                  color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
                  height: 1.3,
                ),
                textAlign: TextAlign.center,
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 根据图标名称获取图标数据
  IconData _getIconData(String iconName) {
    switch (iconName) {
      case 'translate':
        return Icons.translate;
      case 'people':
        return Icons.people;
      case 'history':
        return Icons.history;
      case 'bar_chart':
        return Icons.bar_chart;
      default:
        return Icons.help_outline;
    }
  }
}