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

class VoiceInputPanel extends GetView<VoiceInputController> {
  const VoiceInputPanel({
    Key? key,
    required this.onRecordingResult,
    required this.onClose,
    required this.onRecognizing,
  }) : super(key: key);

  final Function(String) onRecordingResult;
  final VoidCallback onClose;
  final Function(String) onRecognizing;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.white,
            Colors.pink[50]!.withOpacity(0.3),
          ],
        ),
      ),
      child: Container(
        height: 120.h + MediaQuery.of(context).padding.bottom,
        padding: EdgeInsets.only(
          left: 40.w,
          right: 40.w,
          top: 12.h,
          bottom: 12.h + MediaQuery.of(context).padding.bottom,
        ),
        child: Row(
          children: [
            // 左侧静音开关
            Obx(() => Container(
              width: 52.w,
              height: 52.w,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: controller.isMuted.value ? Colors.grey[200] : Colors.white,
                border: Border.all(
                  color: controller.isMuted.value ? Colors.grey[400]! : Colors.grey[300]!,
                  width: 1,
                ),
              ),
              child: IconButton(
                padding: EdgeInsets.zero,
                icon: Icon(
                  controller.isMuted.value ? Icons.mic_off_rounded : Icons.mic_rounded,
                  color: controller.isConnecting.value ? Colors.grey : Colors.black87,
                  size: 28.sp,
                ),
                onPressed: controller.isConnecting.value ? null : controller.toggleMute,
              ),
            )),
            SizedBox(width: 20.w),
            // 中间文字
            Expanded(
              child: Center(
                child: Obx(() => Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      controller.isConnecting.value ? '连接中...' : '你可以开始说话',
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w500,
                        color: controller.isConnecting.value ? Colors.grey[500] : Colors.black87,
                      ),
                    ),
                    if (controller.isConnecting.value) ...[
                      SizedBox(width: 8.w),
                      SizedBox(
                        width: 32.w,
                        child: Row(
                          children: List.generate(
                            3,
                            (index) => Container(
                              width: 4.w,
                              height: 4.w,
                              margin: EdgeInsets.only(right: 4.w),
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Colors.grey[400],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ],
                )),
              ),
            ),
            SizedBox(width: 20.w),
            // 右侧关闭按钮
            Container(
              width: 52.w,
              height: 52.w,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
                border: Border.all(
                  color: Colors.grey[300]!,
                  width: 1,
                ),
              ),
              child: IconButton(
                padding: EdgeInsets.zero,
                icon: Icon(
                  Icons.close_rounded,
                  color: Colors.black87,
                  size: 28.sp,
                ),
                onPressed: onClose,
              ),
            ),
          ],
        ),
      ),
    );
  }
}