deepvoice_client/lib/modules/translation/views/translation_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/translation_controller.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/text_styles.dart';
import '../widgets/translation_message_item.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _buildLanguageSelector(),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Get.back(),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings_outlined, color: Colors.black),
            onPressed: () {
              // Navigate to settings
            },
          ),
        ],
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            Expanded(
              child: _buildMessagesList(),
            ),
            _buildBottomSection(),
          ],
        ),
      ),
    );
  }

  Widget _buildLanguageSelector() {
    return Obx(() {
      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            controller.sourceLanguage.value,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
          ),
          IconButton(
            icon: const Icon(Icons.swap_horiz, color: Color(0xFF4A6FE5)),
            onPressed: controller.switchLanguages,
          ),
          Text(
            controller.targetLanguage.value,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
          ),
        ],
      );
    });
  }

  Widget _buildMessagesList() {
    return Obx(() {
      if (controller.messages.isEmpty) {
        return _buildWelcomeMessage();
      }
      
      return ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        itemCount: controller.messages.length,
        reverse: true,
        itemBuilder: (context, index) {
          final message = controller.messages[controller.messages.length - 1 - index];
          return TranslationMessageItem(message: message);
        },
      );
    });
  }

  Widget _buildWelcomeMessage() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // First welcome message
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.grey[100],
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: Colors.grey[300]!,
                width: 0.5,
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Welcome to Felo Translator. 👆 Click the button above to switch languages",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.grey[700],
                    height: 1.5,
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  children: [
                    Expanded(
                      child: Text(
                        "Welcome to Felo Translator. 👆 Click the button above to switch languages",
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey[800],
                          height: 1.5,
                        ),
                      ),
                    ),
                    const SizedBox(width: 8),
                    Icon(Icons.volume_up, color: Colors.grey[600]),
                  ],
                ),
              ],
            ),
          ),
          
          const SizedBox(height: 20),
          
          // Second instruction message
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: const Color(0xFFEEF4FF),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: const Color(0xFFD0DFFF),
                width: 0.5,
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "👇 Click the button below ▶️ to start speaking, and Felo will automatically recognize the language for translation",
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.grey[700],
                    height: 1.5,
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  children: [
                    Expanded(
                      child: Text(
                        "👇 Click the button below ▶️ to start speaking, and Felo will automatically recognize the language for translation",
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey[800],
                          height: 1.5,
                        ),
                      ),
                    ),
                    const SizedBox(width: 8),
                    Icon(Icons.volume_up, color: Colors.grey[600]),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBottomSection() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 4,
            offset: const Offset(0, -2),
          ),
        ],
      ),
      child: Column(
        children: [
          _buildRecognitionStatus(),
          const SizedBox(height: 8),
          _buildControlButtons(),
        ],
      ),
    );
  }

  Widget _buildRecognitionStatus() {
    return Obx(() {
      final isListening = controller.isListening.value;
      final isUserSpeaking = controller.isUserSpeaking.value;
      
      if (!isListening) {
        return const SizedBox.shrink();
      }
      
      return Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: Colors.grey[100],
          borderRadius: BorderRadius.circular(24),
          border: Border.all(
            color: Colors.grey[300]!,
            width: 0.5,
          ),
        ),
        child: Row(
          children: [
            if (isUserSpeaking)
              _buildSpeakingIndicator()
            else
              Icon(Icons.mic, color: Colors.grey[600]),
            const SizedBox(width: 12),
            Expanded(
              child: Text(
                isUserSpeaking 
                    ? "Listening..." 
                    : "Tap the mic button to start speaking",
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[700],
                  height: 1.5,
                ),
              ),
            ),
          ],
        ),
      );
    });
  }

  Widget _buildSpeakingIndicator() {
    return SizedBox(
      width: 24,
      height: 24,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Icon(Icons.mic, color: const Color(0xFF4A6FE5)),
          Positioned.fill(
            child: CircularProgressIndicator(
              strokeWidth: 2,
              valueColor: const AlwaysStoppedAnimation<Color>(Color(0xFF4A6FE5)),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildControlButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Obx(() {
          final isListening = controller.isListening.value;
          
          return FloatingActionButton(
            onPressed: isListening 
                ? controller.stopListening 
                : controller.startListening,
            backgroundColor: isListening ? Colors.red : const Color(0xFF4A6FE5),
            child: Icon(
              isListening ? Icons.stop : Icons.mic,
              size: 24,
              color: Colors.white,
            ),
          );
        }),
      ],
    );
  }
}