deepvoice_client/lib/modules/login/views/login_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../controllers/login_controller.dart';
import '../../../app/theme/app_theme.dart';

class LoginView extends GetView<LoginController> {
  const LoginView({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],
      body: SafeArea(
        child: Obx(() => controller.viewState == LoginViewState.welcome
            ? _buildWelcomeView(isDarkMode)
            : _buildVerificationView(context, isDarkMode)),
      ),
    );
  }

  // 欢迎页面
  Widget _buildWelcomeView(bool isDarkMode) {
    return Padding(
      padding: EdgeInsets.all(24.w),
      child: SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        child: Column(
          children: [
            // 应用标志和标题
            SizedBox(height: 32.h),
            _buildAppLogo(isDarkMode),
            
            // 欢迎文本
            SizedBox(height: 32.h),
            _buildWelcomeText(isDarkMode),
            
            // 输入框和继续按钮
            SizedBox(height: 24.h),
            _buildInputField(isDarkMode),
            SizedBox(height: 16.h),
            _buildVerificationInputField(isDarkMode),
            SizedBox(height: 16.h),
            _buildContinueButton(isDarkMode),
            
            // 社交媒体登录
            SizedBox(height: 32.h),
            _buildSocialLoginSection(isDarkMode),
            
            // 用户协议
            SizedBox(height: 40.h),
            _buildTermsAndPrivacy(isDarkMode),
            SizedBox(height: 24.h),
          ],
        ),
      ),
    );
  }

  // 验证码页面
  Widget _buildVerificationView(BuildContext context, bool isDarkMode) {
    return Padding(
      padding: EdgeInsets.all(24.w),
      child: SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 返回按钮
            _buildBackButton(isDarkMode),
            
            // 验证码标题
            SizedBox(height: 24.h),
            _buildVerificationTitle(isDarkMode),
            
            // 验证码输入框
            SizedBox(height: 32.h),
            _buildVerificationInputs(context, isDarkMode),
            
            // 重新发送验证码
            SizedBox(height: 16.h),
            _buildResendButton(isDarkMode),
            
            // 登录按钮
            SizedBox(height: 32.h),
            _buildLoginButton(isDarkMode),
            
            // 使用密码登录
            SizedBox(height: 16.h),
            _buildUsePasswordButton(isDarkMode),
            SizedBox(height: 24.h),
          ],
        ),
      ),
    );
  }

  // 应用标志和标题
  Widget _buildAppLogo(bool isDarkMode) {
    return Column(
      children: [
        Container(
          width: 80.w,
          height: 80.w,
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFF0066CC), Color(0xFF5E5CE6)],
            ),
            borderRadius: BorderRadius.circular(24.r),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFF0066CC).withOpacity(0.3),
                blurRadius: 10,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Icon(
            Icons.headset,
            size: 40.sp,
            color: Colors.white,
          ),
        ),
        SizedBox(height: 16.h),
        Text(
          'DeepVoice',
          style: TextStyle(
            fontSize: 24.sp,
            fontWeight: FontWeight.bold,
            color: isDarkMode ? Colors.white : Colors.black,
          ),
        ),
        SizedBox(height: 8.h),
        Text(
          '连接世界，超越声音',
          style: TextStyle(
            fontSize: 14.sp,
            color: isDarkMode ? Colors.grey[400] : Colors.black54,
          ),
        ),
      ],
    );
  }

  // 欢迎文本
  Widget _buildWelcomeText(bool isDarkMode) {
    return Column(
      children: [
        Text(
          '欢迎使用',
          style: TextStyle(
            fontSize: 20.sp,
            fontWeight: FontWeight.w600,
            color: isDarkMode ? Colors.white : Colors.black,
          ),
        ),
        SizedBox(height: 4.h),
        Text(
          '请使用手机号或邮箱登录/注册',
          style: TextStyle(
            fontSize: 14.sp,
            color: isDarkMode ? Colors.grey[400] : Colors.black54,
          ),
        ),
      ],
    );
  }

  // 输入框
  Widget _buildInputField(bool isDarkMode) {
    return Container(
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[900]!.withOpacity(0.4) : Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.circular(16.r),
      ),
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 4.h),
        child: Row(
          children: [
            Icon(
              Icons.person_outline,
              color: isDarkMode ? Colors.grey[400] : Colors.black54,
              size: 20.sp,
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: TextField(
                controller: controller.contactController,
                decoration: InputDecoration(
                  hintText: '手机号码或邮箱',
                  hintStyle: TextStyle(
                    fontSize: 14.sp,
                    color: isDarkMode ? Colors.grey[600] : Colors.black38,
                  ),
                  border: InputBorder.none,
                  fillColor: Colors.transparent,
                  filled: true,
                ),
                style: TextStyle(
                  fontSize: 14.sp,
                  color: isDarkMode ? Colors.white : Colors.black,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 验证码输入框
  Widget _buildVerificationInputField(bool isDarkMode) {
    return Container(
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[900]!.withOpacity(0.4) : Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.circular(16.r),
      ),
      child: Padding(
        padding: EdgeInsets.only(left: 16.w, right: 4.w, top: 4.h, bottom: 4.h),
        child: Row(
          children: [
            Icon(
              Icons.lock_outline,
              color: isDarkMode ? Colors.grey[400] : Colors.black54,
              size: 20.sp,
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: TextField(
                controller: controller.verificationCodeController,
                keyboardType: TextInputType.number,
                maxLength: 6,
                decoration: InputDecoration(
                  hintText: '验证码',
                  hintStyle: TextStyle(
                    fontSize: 14.sp,
                    color: isDarkMode ? Colors.grey[600] : Colors.black38,
                  ),
                  border: InputBorder.none,
                  counterText: '',
                  fillColor: Colors.transparent,
                  filled: true,
                ),
                style: TextStyle(
                  fontSize: 14.sp,
                  color: isDarkMode ? Colors.white : Colors.black,
                ),
              ),
            ),
            Obx(() => TextButton(
              onPressed: controller.countdownSeconds > 0
                  ? null
                  : controller.getVerificationCode,
              style: TextButton.styleFrom(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                foregroundColor: const Color(0xFF3B82F6),
                backgroundColor: Colors.transparent,
                disabledForegroundColor: isDarkMode ? Colors.grey[600] : Colors.grey[400],
              ),
              child: Text(
                controller.countdownSeconds > 0
                    ? '${controller.countdownSeconds}s后重新获取'
                    : '获取验证码',
                style: TextStyle(
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            )),
          ],
        ),
      ),
    );
  }

  // 继续按钮
  Widget _buildContinueButton(bool isDarkMode) {
    return SizedBox(
      width: double.infinity,
      child: Obx(() => ElevatedButton(
        onPressed: controller.isLoading ? null : () => controller.login(),
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFF0066CC),
          foregroundColor: Colors.white,
          padding: EdgeInsets.symmetric(vertical: 14.h),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.r),
          ),
          elevation: 0,
          disabledBackgroundColor: const Color(0xFF0066CC).withOpacity(0.7),
          disabledForegroundColor: Colors.white,
        ),
        child: controller.isLoading
            ? SizedBox(
                height: 20.h,
                width: 20.h,
                child: CircularProgressIndicator(
                  strokeWidth: 2.w,
                  valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
                ),
              )
            : Text(
                '继续',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
      )),
    );
  }

  // 社交媒体登录部分
  Widget _buildSocialLoginSection(bool isDarkMode) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(child: Divider(color: isDarkMode ? Colors.grey[800] : Colors.grey[300])),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: Text(
                '或使用以下方式登录',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: isDarkMode ? Colors.grey[500] : Colors.grey[600],
                ),
              ),
            ),
            Expanded(child: Divider(color: isDarkMode ? Colors.grey[800] : Colors.grey[300])),
          ],
        ),
        SizedBox(height: 24.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildSocialButton(FontAwesomeIcons.google, Colors.red, isDarkMode),
            SizedBox(width: 24.w),
            _buildSocialButton(FontAwesomeIcons.weixin, Colors.green, isDarkMode),
          ],
        ),
      ],
    );
  }

  // 社交媒体按钮
  Widget _buildSocialButton(IconData icon, Color color, bool isDarkMode) {
    return Container(
      width: 48.w,
      height: 48.w,
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[800] : Colors.white,
        borderRadius: BorderRadius.circular(24.r),
        boxShadow: isDarkMode ? [] : [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: IconButton(
        icon: FaIcon(
          icon,
          color: color,
          size: 20.sp,
        ),
        onPressed: () {},
      ),
    );
  }

  // 用户协议和隐私政策
  Widget _buildTermsAndPrivacy(bool isDarkMode) {
    return Column(
      children: [
        Text(
          '登录/注册即表示你同意',
          style: TextStyle(
            fontSize: 12.sp,
            color: isDarkMode ? Colors.grey[500] : Colors.grey[600],
          ),
        ),
        SizedBox(height: 4.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {},
              child: Text(
                '《用户协议》',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: const Color(0xFF3B82F6),
                ),
              ),
            ),
            Text(
              ' 和 ',
              style: TextStyle(
                fontSize: 12.sp,
                color: isDarkMode ? Colors.grey[500] : Colors.grey[600],
              ),
            ),
            GestureDetector(
              onTap: () {},
              child: Text(
                '《隐私政策》',
                style: TextStyle(
                  fontSize: 12.sp,
                  color: const Color(0xFF3B82F6),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  // 返回按钮
  Widget _buildBackButton(bool isDarkMode) {
    return Container(
      width: 40.w,
      height: 40.w,
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[800] : Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20.r),
      ),
      child: IconButton(
        icon: Icon(
          Icons.arrow_back,
          color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
          size: 20.sp,
        ),
        onPressed: () => controller.showWelcomeView(),
      ),
    );
  }

  // 验证码标题
  Widget _buildVerificationTitle(bool isDarkMode) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '输入验证码',
          style: TextStyle(
            fontSize: 20.sp,
            fontWeight: FontWeight.w600,
            color: isDarkMode ? Colors.white : Colors.black,
          ),
        ),
        SizedBox(height: 8.h),
        Obx(() => Text(
          '验证码已发送至 ${controller.displayContact}',
          style: TextStyle(
            fontSize: 14.sp,
            color: isDarkMode ? Colors.grey[400] : Colors.grey[600],
          ),
        )),
      ],
    );
  }

  // 验证码输入框
  Widget _buildVerificationInputs(BuildContext context, bool isDarkMode) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: List.generate(4, (index) => _buildVerificationInput(index, context, isDarkMode)),
    );
  }

  // 单个验证码输入框
  Widget _buildVerificationInput(int index, BuildContext context, bool isDarkMode) {
    return Container(
      width: 60.w,
      height: 60.w,
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.grey[900]!.withOpacity(0.3) : Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.circular(12.r),
        border: Border.all(
          color: isDarkMode ? Colors.grey[700]! : Colors.grey[300]!,
          width: 1,
        ),
      ),
      child: Center(
        child: TextField(
          textAlign: TextAlign.center,
          keyboardType: TextInputType.number,
          maxLength: 1,
          onChanged: (value) {
            controller.updateVerificationCode(index, value);
            if (value.isNotEmpty && index < 3) {
              FocusScope.of(context).nextFocus();
            }
          },
          decoration: InputDecoration(
            counterText: '',
            border: InputBorder.none,
            fillColor: Colors.transparent,
            filled: true,
          ),
          style: TextStyle(
            fontSize: 24.sp,
            fontWeight: FontWeight.w600,
            color: isDarkMode ? Colors.white : Colors.black,
          ),
        ),
      ),
    );
  }

  // 重新发送验证码按钮
  Widget _buildResendButton(bool isDarkMode) {
    return Center(
      child: Obx(() => TextButton.icon(
        onPressed: controller.countdownSeconds > 0
            ? null
            : controller.resendVerificationCode,
        icon: Icon(
          Icons.refresh,
          size: 14.sp,
          color: controller.countdownSeconds > 0
              ? (isDarkMode ? Colors.grey[600] : Colors.grey[500])
              : const Color(0xFF3B82F6),
        ),
        label: Text(
          controller.countdownSeconds > 0
              ? '重新发送验证码 (${controller.countdownSeconds}s)'
              : '重新发送验证码',
          style: TextStyle(
            fontSize: 14.sp,
            color: controller.countdownSeconds > 0
                ? (isDarkMode ? Colors.grey[600] : Colors.grey[500])
                : const Color(0xFF3B82F6),
          ),
        ),
      )),
    );
  }

  // 登录按钮
  Widget _buildLoginButton(bool isDarkMode) {
    return SizedBox(
      width: double.infinity,
      child: Obx(() => ElevatedButton(
        onPressed: controller.isLoading ? null : controller.login,
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFF3B82F6),
          foregroundColor: Colors.white,
          padding: EdgeInsets.symmetric(vertical: 14.h),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.r),
          ),
          elevation: 0,
          disabledBackgroundColor: const Color(0xFF3B82F6).withOpacity(0.7),
          disabledForegroundColor: Colors.white,
        ),
        child: controller.isLoading
            ? SizedBox(
                height: 20.h,
                width: 20.h,
                child: CircularProgressIndicator(
                  strokeWidth: 2.w,
                  valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
                ),
              )
            : Text(
                '登录',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
      )),
    );
  }

  // 使用密码登录按钮
  Widget _buildUsePasswordButton(bool isDarkMode) {
    return Center(
      child: TextButton(
        onPressed: controller.usePasswordLogin,
        child: Text(
          '使用密码登录',
          style: TextStyle(
            fontSize: 14.sp,
            color: isDarkMode ? const Color(0xFF3B82F6) : const Color(0xFF3B82F6),
          ),
        ),
      ),
    );
  }
}