import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/FTFTranslation_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    final TextEditingController inputController = TextEditingController();

    return Scaffold(
      backgroundColor: const Color(0xFF0E0F12),
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: const Text('面对面翻译'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: Obx(() => ListView.builder(
                  padding: const EdgeInsets.all(16),
                  itemCount: controller.messages.length,
                  itemBuilder: (context, index) {
                    final msg = controller.messages[index];
                    final isChinese = msg.isChineseSpeaker;
                    return Align(
                      alignment: isChinese
                          ? Alignment.centerLeft
                          : Alignment.centerRight,
                      child: Container(
                        margin: const EdgeInsets.symmetric(vertical: 6),
                        padding: const EdgeInsets.all(12),
                        decoration: BoxDecoration(
                          color: isChinese ? Colors.blue : Colors.grey[800],
                          borderRadius: BorderRadius.circular(12),
                        ),
                        constraints: const BoxConstraints(maxWidth: 300),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              msg.original,
                              style: const TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const SizedBox(height: 4),
                            Text(
                              msg.translated,
                              style: TextStyle(
                                color: Colors.white.withOpacity(0.9),
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                )),
          ),
          _buildBottomInput(inputController),
        ],
      ),
    );
  }

  Widget _buildBottomInput(TextEditingController inputController) {
    return Obx(() {
      final isLeftInput = controller.isLeftInput.value;
      final inputLang = isLeftInput
          ? controller.leftLanguage.value
          : controller.rightLanguage.value;

      return Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: inputController,
                    style: const TextStyle(color: Colors.white),
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.grey[900],
                      hintText: '请输入 $inputLang 内容',
                      hintStyle: const TextStyle(color: Colors.grey),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide.none,
                      ),
                      contentPadding:
                          const EdgeInsets.symmetric(horizontal: 12),
                    ),
                  ),
                ),
                IconButton(
                  onPressed: () {
                    final text = inputController.text.trim();
                    if (text.isNotEmpty) {
                      controller.addMessage(text);
                      inputController.clear();
                    }
                  },
                  icon: const Icon(Icons.send, color: Colors.white),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Row(
              children: [
                Expanded(
                  child: _buildLanguageDropdown(
                    selected: controller.leftLanguage.value,
                    items: controller.supportedLanguages,
                    onChanged: (value) {
                      if (value != null) controller.leftLanguage.value = value;
                    },
                    icon: Icons.headphones,
                    isSelected: isLeftInput,
                    label: '左方语言',
                    onTapInputSide: () => controller.toggleInputSide(true),
                  ),
                ),
                const SizedBox(width: 12),
                GestureDetector(
                  onTap: controller.swapLanguages,
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: Colors.white10,
                      shape: BoxShape.circle,
                    ),
                    child:
                        const Icon(Icons.compare_arrows, color: Colors.white),
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: _buildLanguageDropdown(
                    selected: controller.rightLanguage.value,
                    items: controller.supportedLanguages,
                    onChanged: (value) {
                      if (value != null) controller.rightLanguage.value = value;
                    },
                    icon: Icons.smartphone,
                    isSelected: !isLeftInput,
                    label: '右方语言',
                    onTapInputSide: () => controller.toggleInputSide(false),
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    });
  }

  Widget _buildLanguageDropdown({
    required String selected,
    required List<String> items,
    required void Function(String?) onChanged,
    required IconData icon,
    required bool isSelected,
    required String label,
    required VoidCallback onTapInputSide,
  }) {
    return GestureDetector(
      onTap: onTapInputSide,
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        decoration: BoxDecoration(
          border: Border.all(
            color: isSelected ? Colors.white : Colors.grey,
          ),
          borderRadius: BorderRadius.circular(24),
          color: isSelected ? Colors.white10 : Colors.transparent,
        ),
        child: Row(
          children: [
            Icon(icon, color: Colors.white),
            const SizedBox(width: 8),
            Expanded(
              child: DropdownButton<String>(
                dropdownColor: Colors.grey[900],
                value: selected,
                isExpanded: true,
                underline: const SizedBox(),
                iconEnabledColor: Colors.white,
                style: const TextStyle(color: Colors.white),
                items: items.map((lang) {
                  return DropdownMenuItem(
                    value: lang,
                    child: Text(lang),
                  );
                }).toList(),
                onChanged: onChanged,
              ),
            ),
          ],
        ),
      ),
    );
  }
}