import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../controllers/translation_controller.dart';
// import 'package:intl/intl.dart';

class TranslationView extends GetView<TranslationController> {
  const TranslationView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(),
      body: _buildBody(),
    );
  }

  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: Colors.black,
          size: 20.sp,
        ),
        onPressed: () {
          // Stop recognition before navigating back
          controller.stopRecognition();
          Get.back();
        },
      ),
      title: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Obx(() => Text(
            controller.sourceLanguage.value.split(' ')[0], // Just show the Chinese part
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
          )),
          SizedBox(width: 4.w),
          Icon(
            Icons.arrow_forward_ios,
            color: Colors.black,
            size: 16.sp,
          ),
          SizedBox(width: 4.w),
          Obx(() => Text(
            controller.targetLanguage.value.split(' ')[0], // Just show the English part
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
          )),
        ],
      ),
      centerTitle: true,
      actions: [
        // TTS toggle button
        Obx(() => IconButton(
          icon: Icon(
            controller.isTtsEnabled.value ? Icons.volume_up : Icons.volume_off,
            color: Colors.black,
            size: 24.sp,
          ),
          onPressed: controller.toggleTts,
          tooltip: '自动播放翻译结果',
        )),
      ],
    );
  }

  Widget _buildBody() {
    return Column(
      children: [
        Expanded(
          child: _buildTranslationContent(),
        ),
        _buildControlBar(),
      ],
    );
  }

  Widget _buildTranslationContent() {
    return Obx(() {
      final itemCount = controller.translationHistory.length;
      
      // 添加对recognizedText和translatedText的监听
      final hasRecognizedText = controller.recognizedText.value.isNotEmpty;
      final hasTranslatedText = controller.translatedText.value.isNotEmpty;
      final showCurrentText = hasRecognizedText || hasTranslatedText;
      
      return ListView.builder(
        controller: controller.scrollController,
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
        itemCount: itemCount + (showCurrentText ? 1 : 0),
        itemBuilder: (context, index) {
          // Current item (being translated)
          if (showCurrentText && index == itemCount) {
            return _buildTranslationItemWidget(
              controller.recognizedText.value,
              controller.translatedText.value,
              true,
            );
          }
          
          // History items
          final historyItem = controller.translationHistory[index];
          return _buildTranslationItemWidget(
            historyItem.sourceText,
            historyItem.translatedText,
            false,
            item: historyItem,
          );
        },
      );
    });
  }

  Widget _buildTranslationItemWidget(String sourceText, String translatedText, bool isCurrent, {TranslationItem? item}) {
    return Container(
      margin: EdgeInsets.only(bottom: 24.h),
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Source text
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(16.r),
            child: Text(
              sourceText.isEmpty && isCurrent ? '等待语音输入...' : sourceText,
              style: TextStyle(
                fontSize: 16.sp,
                color: sourceText.isEmpty && isCurrent ? Colors.grey : Colors.black,
              ),
            ),
          ),
          
          // Divider
          Divider(height: 1, thickness: 1, color: Colors.grey[200]),
          
          // Translated text
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(16.r),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Text(
                    translatedText.isEmpty && isCurrent ? '翻译结果将显示在这里...' : translatedText,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: translatedText.isEmpty && isCurrent ? Colors.grey : Colors.black,
                    ),
                  ),
                ),
                if (translatedText.isNotEmpty)
                  IconButton(
                    icon: Icon(
                      Icons.volume_up,
                      color: Colors.blue,
                      size: 20.sp,
                    ),
                    onPressed: () {
                      if (isCurrent) {
                        controller.playTranslatedText(translatedText);
                      } else if (item != null) {
                        controller.playTranslationItem(item);
                      }
                    },
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildControlBar() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withAlpha(13), // 0.05 * 255 ≈ 13
            blurRadius: 4,
            offset: const Offset(0, -2),
          ),
        ],
      ),
      child: Center(
        child: Obx(() {
          final isRecognizing = controller.isRecognizing.value;
          return GestureDetector(
            onTap: () {
              if (isRecognizing) {
                controller.stopRecognition();
              } else {
                controller.startRecognition();
              }
            },
            child: Container(
              width: 60.w,
              height: 60.w,
              decoration: BoxDecoration(
                color: isRecognizing ? Colors.red : Colors.blue,
                shape: BoxShape.circle,
              ),
              child: Icon(
                isRecognizing ? Icons.pause : Icons.play_arrow,
                color: Colors.white,
                size: 30.sp,
              ),
            ),
          );
        }),
      ),
    );
  }
}