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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('火山语音识别测试'),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0.r),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 识别模式选择
            Card(
              child: Padding(
                padding: EdgeInsets.all(16.0.r),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '识别模式',
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 8.h),
                    Obx(() => Row(
                      children: [
                        Expanded(
                          child: RadioListTile<bool>(
                            title: const Text('一次性识别'),
                            value: false,
                            groupValue: controller.isContinuous.value,
                            onChanged: (value) {
                              if (value != null) {
                                controller.isContinuous.value = value;
                              }
                            },
                          ),
                        ),
                        Expanded(
                          child: RadioListTile<bool>(
                            title: const Text('连续识别'),
                            value: true,
                            groupValue: controller.isContinuous.value,
                            onChanged: (value) {
                              if (value != null) {
                                controller.isContinuous.value = value;
                              }
                            },
                          ),
                        ),
                      ],
                    )),
                  ],
                ),
              ),
            ),
            
            SizedBox(height: 16.h),
            
            // 录音控制
            Card(
              child: Padding(
                padding: EdgeInsets.all(16.0.r),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '录音控制',
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 16.h),
                    Center(
                      child: Obx(() => controller.isListening.value
                        ? ElevatedButton.icon(
                            onPressed: () => controller.stopListening(),
                            icon: const Icon(Icons.stop),
                            label: const Text('停止录音'),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.red,
                              foregroundColor: Colors.white,
                              padding: EdgeInsets.symmetric(
                                horizontal: 24.w,
                                vertical: 12.h,
                              ),
                            ),
                          )
                        : ElevatedButton.icon(
                            onPressed: () => controller.startListening(),
                            icon: const Icon(Icons.mic),
                            label: const Text('开始录音'),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.blue,
                              foregroundColor: Colors.white,
                              padding: EdgeInsets.symmetric(
                                horizontal: 24.w,
                                vertical: 12.h,
                              ),
                            ),
                          ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            SizedBox(height: 16.h),
            
            // 识别结果
            Expanded(
              child: Card(
                child: Padding(
                  padding: EdgeInsets.all(16.0.r),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '识别结果',
                            style: TextStyle(
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          IconButton(
                            icon: const Icon(Icons.clear),
                            onPressed: () => controller.clearResults(),
                            tooltip: '清空结果',
                          ),
                        ],
                      ),
                      SizedBox(height: 8.h),
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.all(8.0.r),
                          decoration: BoxDecoration(
                            border: Border.all(color: Colors.grey),
                            borderRadius: BorderRadius.circular(4.0.r),
                          ),
                          child: Obx(() => ListView.builder(
                            itemCount: controller.recognitionResults.length,
                            itemBuilder: (context, index) {
                              final result = controller.recognitionResults[index];
                              return Padding(
                                padding: EdgeInsets.symmetric(vertical: 4.0.h),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      '${index + 1}. ',
                                      style: const TextStyle(
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    Expanded(
                                      child: Text(result),
                                    ),
                                  ],
                                ),
                              );
                            },
                          )),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            
            SizedBox(height: 16.h),
            
            // 状态显示
            Card(
              child: Padding(
                padding: EdgeInsets.all(16.0.r),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '状态',
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 8.h),
                    Obx(() => Text(
                      controller.connectionStatus.value,
                      style: TextStyle(
                        color: controller.connectionStatus.value == 'Connected' 
                            ? Colors.green 
                            : (controller.connectionStatus.value == 'Disconnecting...' 
                                ? Colors.orange 
                                : Colors.grey),
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                    SizedBox(height: 8.h),
                    Obx(() => controller.errorMessage.value.isNotEmpty
                        ? Text(
                            '错误: ${controller.errorMessage.value}',
                            style: TextStyle(
                              color: Colors.red,
                              fontSize: 14.sp,
                            ),
                          )
                        : const SizedBox.shrink()),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}