deepvoice_client/lib/modules/voice_replication/views/voice_replication_view.dart

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

import '../controllers/voice_replication_controller.dart';
import 'recorder_bottom_sheet.dart';

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

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Colors.grey[50],
      appBar: _buildAppBar(isDarkMode),
      body: _buildBody(isDarkMode),
    );
  }

  // 构建应用栏
  PreferredSizeWidget _buildAppBar(bool isDarkMode) {
    return AppBar(
      backgroundColor: isDarkMode ? Colors.black : Colors.white,
      elevation: 0.5,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: isDarkMode ? Colors.white : Colors.black,
          size: 20.sp,
        ),
        onPressed: () => Get.back(),
      ),
      title: Text(
        '声音复刻',
        style: TextStyle(
          fontSize: 17.sp,
          fontWeight: FontWeight.w600,
          color: isDarkMode ? Colors.white : Colors.black,
        ),
      ),
      centerTitle: true,
    );
  }

  // 构建主体内容
  Widget _buildBody(bool isDarkMode) {
    return ListView(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 15.w),
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 20.w),
          margin: EdgeInsets.only(bottom: 15.w),
          decoration: BoxDecoration(
            color: isDarkMode ? Colors.grey[800] : Colors.white,
            borderRadius: BorderRadius.circular(12.w),
            boxShadow: [
              BoxShadow(
                color: isDarkMode
                    ? Colors.black.withValues(alpha: 0.2)
                    : Colors.black.withValues(alpha: 0.05),
                blurRadius: 10,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Column(
            children: [
              Container(
                width: 60.w,
                height: 60.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12.w),
                  border: Border.all(
                    color: Colors.grey,
                  ),
                ),
                child: Icon(
                  Icons.voice_chat,
                  size: 40.w,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 20.w, bottom: 10.w),
                child: Text(
                  '复刻你的声音',
                  style: TextStyle(
                    color: isDarkMode ? Colors.white : Colors.black87,
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Text(
                '使用声音复刻可为你生成专属音色档案，在配音、播报与对话中保留你的声音特征，适用于视频解说、虚拟助理、无障碍朗读等场景。',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: isDarkMode ? Colors.white : Colors.black87,
                  fontSize: 14.sp,
                ),
              ),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 2.w),
          decoration: BoxDecoration(
            color: isDarkMode ? Colors.grey[800] : Colors.white,
            borderRadius: BorderRadius.circular(12.w),
            boxShadow: [
              BoxShadow(
                color: isDarkMode
                    ? Colors.black.withValues(alpha: 0.2)
                    : Colors.black.withValues(alpha: 0.05),
                blurRadius: 10,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Obx(
            () => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '开启声音复刻',
                      style: TextStyle(
                        color: isDarkMode ? Colors.white : Colors.black87,
                        fontSize: 16.sp,
                      ),
                    ),
                    Transform.scale(
                      scale: 0.9,
                      alignment: Alignment.centerRight,
                      child: Switch(
                        value: controller.isReplicating.value,
                        onChanged: controller.switchChange,
                      ),
                    ),
                  ],
                ),
                if (controller.isReplicating.value) _buildOpen(isDarkMode),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildOpen(bool isDarkMode) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.w),
      child: controller.speakerProfileId.value.isNotEmpty
          ? Text(
              '个人语音ID：${controller.speakerProfileId.value}',
              style: TextStyle(
                color: isDarkMode ? Colors.white : Colors.grey,
                fontSize: 14.sp,
              ),
            )
          : GestureDetector(
              onTap: () {
                Get.bottomSheet(
                  const RecorderBottomSheet(),
                  isScrollControlled: true,
                  backgroundColor:
                      isDarkMode ? Colors.grey[800] : Colors.grey[100],
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(12.r),
                    ),
                  ),
                );
              },
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 12.w,
                  vertical: 6.w,
                ),
                decoration: BoxDecoration(
                  color: Colors.blue.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.circular(6.r),
                  border: Border.all(
                    color: Colors.blue.withValues(alpha: 0.3),
                  ),
                ),
                child: Text(
                  '创建个人语音',
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.blue,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
    );
  }
}