import 'package:appframe/bloc/login_phone_cubit.dart';
import 'package:appframe/ui/widgets/login/login_page_agreed_widget.dart';
import 'package:appframe/ui/widgets/login/login_page_header_widget.dart';
import 'package:appframe/ui/widgets/login/login_page_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class LoginPhonePage extends StatelessWidget {
  const LoginPhonePage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LoginPhoneCubit(LoginPhoneState()),
      child: BlocConsumer<LoginPhoneCubit, LoginPhoneState>(
          builder: (context, state) {
            var loginPhoneCubit = context.read<LoginPhoneCubit>();
            return Scaffold(
              resizeToAvoidBottomInset: true,
              backgroundColor: Colors.white,
              body: SafeArea(
                top: false,
                child: SingleChildScrollView(
                    child: Column(children: [
                  LoginPageImageWidget(),
                  Transform.translate(
                    offset: Offset(0, -40), // 向上移动40像素
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                        color: Colors.white, // 设置背景色
                      ),
                      padding: const EdgeInsets.symmetric(horizontal: 24.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SizedBox(height: 30),
                          LoginPageHeaderWidget(),
                          SizedBox(height: 25),
                          _buildInputFields(loginPhoneCubit, state),
                          SizedBox(height: 20),
                          _buildLoginButton(),
                          SizedBox(height: 30),
                          _buildWechatLogin(loginPhoneCubit),
                          SizedBox(height: 24.5),
                          _buildAgreement(context, loginPhoneCubit, state.agreed),
                        ],
                      ),
                    ),
                  ),
                ])),
              ),
            );
          },
          listener: (context, state) {}),
    );
  }

  Widget _buildInputFields(LoginPhoneCubit loginPhoneCubit, LoginPhoneState state) {
    return Column(
      children: [
        // 手机号输入框
        Container(
          height: 60.5,
          decoration: BoxDecoration(
            color: Color(0xFFF7F9FF),
            borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
          ),
          child: TextField(
            controller: loginPhoneCubit.phoneController,
            keyboardType: TextInputType.phone,
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly,
              LengthLimitingTextInputFormatter(11), // 使用这个来限制长度
              FilteringTextInputFormatter.allow(RegExp(r'^1[0-9]{0,10}$')),
            ],
            decoration: InputDecoration(
              hintText: '请输入手机号',
              hintStyle: TextStyle(
                fontSize: 18,
                color: Color(0xFFCCCCCC),
              ),
              border: InputBorder.none,
              contentPadding: EdgeInsets.fromLTRB(0, 26.5, 0, 15),
              // 左右内边距，垂直居中
              prefixIcon: Container(
                width: 25.5,
                height: 25.5,
                margin: EdgeInsets.only(left: 15), // 控制左边距
                child: Image.asset(
                  'assets/images/login/phone_blue_icon.png',
                  fit: BoxFit.contain,
                ),
              ),
            ),
            style: TextStyle(
              fontSize: 18,
              color: Color(0xFF000000),
            ),
          ),
        ),
        // 增加一条线段
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 15),
          child: Divider(
            color: Color(0xFFE1E7FF),
            height: 0.5,
            thickness: 0.5,
          ),
        ),
        // 验证码输入框和发送按钮
        Row(
          children: [
            Expanded(
              child: Container(
                height: 60.5,
                decoration: BoxDecoration(
                  color: Color(0xFFF7F9FF),
                  borderRadius: BorderRadius.vertical(bottom: Radius.circular(15)),
                ),
                child: Stack(
                  children: [
                    TextField(
                      controller: loginPhoneCubit.codeController,
                      keyboardType: TextInputType.number,
                      inputFormatters: [
                        FilteringTextInputFormatter.digitsOnly,
                        LengthLimitingTextInputFormatter(6), // 使用这个来限制长度
                      ],
                      decoration: InputDecoration(
                        hintText: '请输入验证码',
                        hintStyle: TextStyle(
                          fontSize: 18,
                          color: Color(0xFFCCCCCC),
                        ),
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.fromLTRB(0, 26.5, 0, 15),
                        // 左右内边距，垂直居中
                        prefixIcon: Container(
                          width: 25.5,
                          height: 25.5,
                          margin: EdgeInsets.only(left: 15), // 控制左边距
                          child: Image.asset(
                            'assets/images/login/security_blue_icon.png',
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                      style: TextStyle(
                        fontSize: 18,
                        color: Color(0xFF000000),
                      ),
                    ),
                    Positioned(
                      right: 0,
                      top: 0,
                      bottom: 0,
                      child: Container(
                        width: 100,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                        ),
                        child: TextButton(
                          onPressed: () {
                            if (state.allowSend) {
                              loginPhoneCubit.sendVerificationCode();
                            }
                          },
                          style: TextButton.styleFrom(
                            backgroundColor: Colors.transparent,
                            // foregroundColor: Colors.blue,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                            padding: EdgeInsets.zero,
                          ),
                          child: Text(
                            state.allowSend ? '发送验证码' : '${state.seconds}s后可重发',
                            style: TextStyle(
                              fontSize: 16,
                              color: Color(0xFF7691FA),
                              fontWeight: FontWeight.normal,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildLoginButton() {
    return SizedBox(
      width: double.infinity,
      height: 47,
      child: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF7691FA),
          foregroundColor: Colors.white,
          textStyle: TextStyle(fontSize: 19),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(23.5),
          ),
        ),
        child: Text('手机号登录'),
      ),
    );
  }

  Widget _buildWechatLogin(LoginPhoneCubit loginPhoneCubit) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              loginPhoneCubit.goLoginMain();
            },
            child: Column(
              children: [
                Image.asset('assets/images/login/wechat.png'),
                SizedBox(height: 4),
                Text(
                  '微信登录',
                  style: TextStyle(
                    fontSize: 14,
                    color: Color(0xFF000000),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAgreement(BuildContext context, LoginPhoneCubit loginPhoneCubit, bool agreed) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 32.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Theme(
            data: Theme.of(context).copyWith(
              checkboxTheme: CheckboxThemeData(
                shape: CircleBorder(
                  side: BorderSide(width: 0.5, color: Color(0xFF999999)),
                ),
                fillColor: WidgetStateProperty.resolveWith<Color>(
                  (Set<WidgetState> states) {
                    if (states.contains(WidgetState.selected)) {
                      return Color(0xFF7691FA); // 选中时的颜色
                    }
                    return Colors.white; // 未选中时的颜色
                  },
                ),
                checkColor: WidgetStateProperty.all<Color>(Colors.white),
                side: BorderSide(width: 0.5, color: Color(0xFF999999)),
              ),
              cardColor: Colors.white,
              unselectedWidgetColor: Color(0xFF999999),
            ),
            child: Checkbox(
              value: agreed,
              onChanged: (bool? value) {
                loginPhoneCubit.toggleAgreed(value!);
              },
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 缩小点击区域，减小间隔
            ),
          ),
          LoginPageAgreedWidget(),
        ],
      ),
    );
  }
}