import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../core/theme/app_colors.dart';
import '../../common/widgets/language_selector_bar.dart';

import '../controllers/text_translation_controller.dart';

/// 文本翻译页面
class TextTranslationView extends GetView<TextTranslationController> {
  const TextTranslationView({Key? key}) : super(key: key);

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

    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Colors.grey[50],
      appBar: _buildAppBar(isDarkMode),
      body: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          // 点击空白区域收起键盘
          FocusManager.instance.primaryFocus?.unfocus();
        },
        child: SafeArea(
          child: SingleChildScrollView(
            // 拖动时也自动收起键盘
            keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
            padding: EdgeInsets.all(16.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 输入区域
                _buildInputSection(isDarkMode),
                SizedBox(height: 20.h),

                // 翻译按钮
                _buildTranslateButton(isDarkMode),
                SizedBox(height: 20.h),

                // 翻译结果区域
                _buildResultSection(isDarkMode),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 构建应用栏
  PreferredSizeWidget _buildAppBar(bool isDarkMode) {
    return AppBar(
      backgroundColor: isDarkMode ? AppColors.cardBackground : Colors.white,
      elevation: 1,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: isDarkMode ? Colors.white : Colors.black,
          size: 20.sp,
        ),
        onPressed: () => Get.back(),
      ),
      centerTitle: true,
      title: Text(
        'textTranslation'.tr, // 文本翻译
        style: TextStyle(
          fontSize: 18.sp,
          fontWeight: FontWeight.w600,
          color: isDarkMode ? Colors.white : Colors.black,
        ),
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      ),
      // actions: [
      //   IconButton(
      //     icon: Icon(
      //       Icons.clear_all,
      //       color: isDarkMode ? Colors.white : Colors.black,
      //       size: 24.sp,
      //     ),
      //     onPressed: controller.clearInput,
      //     tooltip: 'clearInput'.tr,
      //   ),
      // ],
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(50.h),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
          child: _buildLanguageSelector(isDarkMode),
        ),
      ),
    );
  }

  /// 构建语言选择器（通用组件）
  Widget _buildLanguageSelector(bool isDarkMode) {
    return LanguageSelectorBar(
      sourceText: () => controller.sourceLanguageChineseName.value,
      targetText: () => controller.targetLanguageChineseName.value,
      onTapSource: () =>
          controller.showLanguageSelector(isSourceLanguage: true),
      onTapTarget: () =>
          controller.showLanguageSelector(isSourceLanguage: false),
      onSwap: controller.swapLanguages,
      translateLanguageNames: true, // 是否翻译语言名称
      fontSizeSp: 15,
    );
  }

  /// 构建输入区域
  Widget _buildInputSection(bool isDarkMode) {
    return Container(
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[900] : Colors.white,
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child:
          // Column(
          //crossAxisAlignment: CrossAxisAlignment.start,
          // children: [
          // Padding(
          //   padding: EdgeInsets.fromLTRB(16.w, 16.h, 16.w, 8.h),
          //   child: Text(
          //     'inputTextToTranslate'.tr,
          //     style: TextStyle(
          //       fontSize: 14.sp,
          //       fontWeight: FontWeight.w500,
          //       color: isDarkMode ? Colors.grey[300] : Colors.grey[700],
          //     ),
          //   ),
          // ),
          Container(
        //margin: EdgeInsets.symmetric(horizontal: 16.w),
        padding: EdgeInsets.all(12.w),
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.grey[800] : Colors.grey[50],
          borderRadius: BorderRadius.circular(12.r),
          border: Border.all(
            color: isDarkMode ? Colors.grey[700]! : Colors.grey[300]!,
          ),
        ),
        child: TextField(
          controller: controller.textController,
          maxLines: 7,
          maxLength: 1000,
          style: TextStyle(
            fontSize: 14.sp,
            color: isDarkMode ? Colors.white : Colors.black,
            height: 1.5.h,
          ),
          decoration: InputDecoration(
            hintText: 'inputTextToTranslate'.tr, // 请输入待翻译的文本
            hintStyle: TextStyle(
              color: isDarkMode ? Colors.grey[500] : Colors.grey[400],
            ),
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            counterStyle: TextStyle(
              color: isDarkMode ? Colors.grey[500] : Colors.grey[400],
            ),
            filled: true,
            fillColor: isDarkMode ? Colors.grey[800] : Colors.grey[50],
            contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0.h),
            isDense: true, // 减少默认边距
          ),
        ),
      ),
      //SizedBox(height: 16.h),
      // ],
      // ),
    );
  }

  /// 构建翻译按钮
  Widget _buildTranslateButton(bool isDarkMode) {
    return Obx(() => SizedBox(
          width: double.infinity,
          child: ElevatedButton(
            onPressed: controller.isTranslating.value
                ? null
                : () {
                    // 点击“翻译”按钮时先收起键盘
                    FocusManager.instance.primaryFocus?.unfocus();
                    controller.translateText();
                  },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
              foregroundColor: Colors.white,
              padding: EdgeInsets.symmetric(vertical: 16.h),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.r),
              ),
              elevation: 0,
              disabledBackgroundColor: Colors.grey,
            ),
            child: controller.isTranslating.value
                ? Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(
                        width: 20.w,
                        height: 20.w,
                        child: const CircularProgressIndicator(
                          strokeWidth: 2,
                          valueColor:
                              AlwaysStoppedAnimation<Color>(Colors.white),
                        ),
                      ),
                      SizedBox(width: 12.w),
                      Text(
                        'translating'.tr, // 正在翻译
                        style: TextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  )
                : Text(
                    'translate'.tr, // 翻译
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
          ),
        ));
  }

  /// 构建翻译结果区域
  Widget _buildResultSection(bool isDarkMode) {
    return Obx(() {
      if (controller.translatedText.value.isEmpty) {
        return const SizedBox.shrink();
      }

      return Container(
        width: double.infinity,
        // padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.grey[900] : Colors.white,
          borderRadius: BorderRadius.circular(12.r),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(12.w),
              decoration: BoxDecoration(
                color: isDarkMode ? Colors.grey[800] : Colors.grey[50],
                borderRadius: BorderRadius.circular(8.r),
                border: Border.all(
                  color: isDarkMode ? Colors.grey[700]! : Colors.grey[300]!,
                ),
              ),
              child: Column(
                children: [
                  Text(
                    controller.translatedText.value,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: isDarkMode ? Colors.white : Colors.black,
                      height: 1.5.h,
                    ),
                  ),
                  SizedBox(height: 12.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      GestureDetector(
                        onTap: controller.copyResult,
                        child: Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 12.w, vertical: 6.h),
                          decoration: BoxDecoration(
                            color: Colors.blue.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(6.r),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                Icons.copy,
                                size: 16.sp,
                                color: Colors.blue,
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    });
  }
}