import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/profile_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../core/widgets/common_bottom_nav.dart';
import '../../../routes/app_routes.dart';
import 'dart:io';

// ProfileView: 用户设置页面
class ProfileView extends GetView<ProfileController> {
  const ProfileView({Key? key}) : super(key: key);

  Widget _buildMenuItem({
    required String title,
    required IconData icon,
    String? subtitle,
    required VoidCallback onTap,
  }) {
    return ListTile(
      leading: Icon(icon, size: 24.sp, color: Colors.grey[700]),
      title: Text(
        title,
        style: TextStyle(
          fontSize: 16.sp,
          fontWeight: FontWeight.w500,
        ),
      ),
      subtitle: subtitle != null
          ? Text(
              subtitle,
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.grey[600],
              ),
            )
          : null,
      trailing: Icon(
        Icons.chevron_right,
        size: 24.sp,
        color: Colors.grey[400],
      ),
      onTap: onTap,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Text(
          '设置'.tr,
          style: TextStyle(
            fontSize: 17.sp,
            fontWeight: FontWeight.w600,
            color: Colors.black,
          ),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          SizedBox(height: 12.h),
          const Divider(),
          _buildMenuItem(
            title: '关于'.tr,
            icon: Icons.info_outline,
            onTap: () {
              // TODO: 实现关于页面
            },
          ),
          const Divider(),
          _buildMenuItem(
            title: '火山语音合成测试'.tr,
            icon: Icons.record_voice_over,
            subtitle: '测试火山语音TTS功能',
            onTap: () {
              Get.toNamed(Routes.TTS_TEST);
            },
          ),
          const Divider(),
          _buildMenuItem(
            title: '火山语音识别测试'.tr,
            icon: Icons.mic_external_on,
            subtitle: '测试火山语音ASR功能',
            onTap: () {
              Get.toNamed(Routes.VOLCANO_ASR_TEST);
            },
          ),
          const Divider(),
          _buildMenuItem(
            title: 'Azure语音识别测试'.tr,
            icon: Icons.mic,
            subtitle: '测试Azure语音ASR功能',
            onTap: () {
              Get.toNamed(Routes.AZURE_ASR_TEST);
            },
          ),
          const Divider(),
          _buildMenuItem(
            title: 'Azure语音合成测试'.tr,
            icon: Icons.record_voice_over,
            subtitle: '测试Azure语音TTS功能',
            onTap: () {
              Get.toNamed(Routes.AZURE_TTS_TEST);
            },
          ),
          const Divider(),
          _buildMenuItem(
            title: '本地语音合成测试'.tr,
            icon: Icons.speaker_phone,
            subtitle: '测试Flutter TTS本地语音合成功能',
            onTap: () {
              Get.toNamed(Routes.FLUTTER_TTS_TEST);
            },
          ),
          const Divider(),
          _buildMenuItem(
            title: '本地语音识别测试'.tr,
            icon: Icons.mic_none,
            subtitle: '测试Flutter本地语音识别功能',
            onTap: () {
              Get.toNamed(Routes.FLUTTER_ASR_TEST);
            },
          ),
        ],
      ),
      bottomNavigationBar: const CommonBottomNav(currentIndex: 2),
    );
  }
}

// EditProfileView: 编辑个人资料页面
class EditProfileView extends GetView<ProfileController> {
  const EditProfileView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
    final nameController =
        TextEditingController(text: controller.userInfo.value.name);

    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        centerTitle: true,
        elevation: 0,
        backgroundColor: isDarkMode ? Colors.black : Colors.white,
        title: Text(
          'editProfile'.tr,
          style: TextStyle(
            fontSize: 17.sp,
            fontWeight: FontWeight.w600,
            color: isDarkMode ? Colors.white : Colors.black,
          ),
        ),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            // 头像编辑
            Center(
              child: GestureDetector(
                  onTap: () => controller.updateUserAvatar(),
                  child: Stack(
                    children: [
                      Obx(() => CircleAvatar(
                            radius: 50.r,
                            backgroundImage: controller.localAvatar.value.isNotEmpty
                                ? FileImage(File(controller.localAvatar.value))
                                : (controller.userInfo.value.avatar.isNotEmpty
                                    ? NetworkImage(
                                        controller.userInfo.value.avatar)
                                    : null) as ImageProvider<Object>?,
                            child: controller.userInfo.value.avatar.isEmpty
                                ? Icon(Icons.person, size: 50.r)
                                : null,
                          )),
                      Positioned(
                        right: 0,
                        bottom: 0,
                        child: Container(
                            padding: EdgeInsets.all(4.w),
                            decoration: const BoxDecoration(
                              color: Colors.blue,
                              shape: BoxShape.circle,
                            ),
                            child: Icon(
                              Icons.camera_alt,
                              size: 20.w,
                              color: Colors.white,
                            )),
                      )
                    ],
                  )),
            ),
            SizedBox(height: 20.h),

            // 昵称编辑 - 使用外部定义的controller而不是每次重建
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: nameController,
                    decoration: InputDecoration(
                      labelText: 'nickname'.tr,
                      border: const OutlineInputBorder(),
                      suffixIcon: nameController.text.isNotEmpty
                          ? IconButton(
                              icon: const Icon(Icons.clear),
                              onPressed: () {
                                nameController.clear();
                              },
                            )
                          : null,
                    ),
                  ),
                ),
              ],
            ),
            // ... 其他编辑项 ...

            SizedBox(height: 30.h),
            // 添加一个大的保存按钮
            SizedBox(
              width: double.infinity,
              height: 50.h,
              child: ElevatedButton(
                onPressed: () {
                  // 保存用户名
                  controller.updateUserName(nameController.text);
                  // 返回上一级页面
                  Get.back();
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: isDarkMode ? Colors.blue[700] : Colors.blue,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                ),
                child: Text(
                  'save'.tr,
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}