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) {
    // 使用浅色主题
    return Theme(
      data: AppTheme.lightTheme,
      child: Scaffold(
        body: SafeArea(
          child: Obx(() => controller.viewState == LoginViewState.welcome
              ? _buildWelcomeView()
              : _buildVerificationView(context)),
        ),
      ),
    );
  }

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

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

  // 状态栏
  Widget _buildStatusBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          '9:41',
          style: TextStyle(
            fontSize: 12.sp,
            color: Colors.black54,
          ),
        ),
        Row(
          children: [
            Icon(Icons.signal_cellular_4_bar, size: 12.sp, color: Colors.black54),
            SizedBox(width: 4.w),
            Icon(Icons.wifi, size: 12.sp, color: Colors.black54),
            SizedBox(width: 4.w),
            Icon(Icons.battery_full, size: 12.sp, color: Colors.black54),
          ],
        ),
      ],
    );
  }

  // 应用标志和标题
  Widget _buildAppLogo() {
    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: Colors.black,
          ),
        ),
        SizedBox(height: 8.h),
        Text(
          '连接世界，超越声音',
          style: TextStyle(
            fontSize: 14.sp,
            color: Colors.black54,
          ),
        ),
      ],
    );
  }

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

  // 输入框
  Widget _buildInputField() {
    return Container(
      decoration: BoxDecoration(
        color: 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: Colors.black54,
              size: 20.sp,
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: TextField(
                controller: controller.contactController,
                decoration: InputDecoration(
                  hintText: '手机号码或邮箱',
                  hintStyle: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.black38,
                  ),
                  border: InputBorder.none,
                ),
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 验证码输入框
  Widget _buildVerificationInputField() {
    return Container(
      decoration: BoxDecoration(
        color: 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: 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: Colors.black38,
                  ),
                  border: InputBorder.none,
                  counterText: '',
                ),
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black,
                ),
              ),
            ),
            Obx(() => TextButton(
              onPressed: controller.countdownSeconds > 0
                  ? null
                  : controller.getVerificationCode,
              style: TextButton.styleFrom(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                foregroundColor: const Color(0xFF0066CC),
                backgroundColor: Colors.transparent,
                disabledForegroundColor: Colors.black38,
              ),
              child: Text(
                controller.countdownSeconds > 0
                    ? '${controller.countdownSeconds}s后重新获取'
                    : '获取验证码',
                style: TextStyle(
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            )),
          ],
        ),
      ),
    );
  }

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

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

  // 社交媒体按钮
  Widget _buildSocialButton(IconData icon, Color color) {
    return Container(
      width: 48.w,
      height: 48.w,
      decoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.circular(24.r),
      ),
      child: IconButton(
        icon: Icon(icon, color: color, size: 20.sp),
        onPressed: () {},
      ),
    );
  }

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

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

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

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

  // 单个验证码输入框
  Widget _buildVerificationInput(int index, BuildContext context) {
    return Container(
      width: 60.w,
      height: 60.w,
      decoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.1),
        borderRadius: BorderRadius.circular(16.r),
        border: Border.all(
          color: Colors.black12,
          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: const InputDecoration(
            counterText: '',
            border: InputBorder.none,
          ),
          style: TextStyle(
            fontSize: 24.sp,
            fontWeight: FontWeight.w600,
            color: Colors.black,
          ),
        ),
      ),
    );
  }

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

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

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