deepvoice_client/lib/modules/translation/middleware/views/translation_middleware_view.dart

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';
import '../../../../data/models/user_Info.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,
        ),
      ),
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(28.w),
        child: Obx(() {
          final _ = User.refreshTick.value;
          final remain = User.isLoggedIn() ? User.instance.tradeintegral : 0;
          final total =
              User.isLoggedIn() ? User.instance.tradetotalintegral : 0;
          final double fraction =
              total > 0 ? (remain / total).clamp(0.0, 1.0).toDouble() : 0.0;
          return Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                padding: EdgeInsets.only(right: 12.w, bottom: 4.w),
                alignment: Alignment.centerRight,
                child: Text(
                  _formatHms(remain),
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: isDarkMode ? Colors.white70 : Colors.black54,
                  ),
                ),
              ),
              LayoutBuilder(
                builder: (context, constraints) {
                  final barWidth = constraints.maxWidth * fraction;
                  return Stack(
                    children: [
                      Container(
                        height: 2.w,
                        decoration: BoxDecoration(
                          color: isDarkMode ? Colors.white10 : Colors.black12,
                          borderRadius: BorderRadius.circular(2.w),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Container(
                          width: barWidth,
                          height: 2.w,
                          decoration: BoxDecoration(
                            color: isDarkMode
                                ? const Color(0xFF0066CC)
                                : Colors.blue,
                            borderRadius: BorderRadius.circular(2.w),
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ],
          );
        }),
      ),
    );
  }

  /// 构建主体内容
  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),
            ],
          ),
        ),
      ),
    );
  }

  String _formatHms(int seconds) {
    int h = seconds ~/ 3600;
    int m = (seconds % 3600) ~/ 60;
    int s = seconds % 60;
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    return '${twoDigits(h)}:${twoDigits(m)}:${twoDigits(s)}';
  }
}