import 'package:appframe/bloc/setting/account_phone_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';

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

  @override
  Widget build(BuildContext context) {
    final Map<String, dynamic>? extraData = GoRouterState.of(context).extra as Map<String, dynamic>?;
    var phone = extraData?['phone'] ?? '';

    return BlocProvider(
      create: (context) => AccountPhoneCubit(AccountPhoneState(phone: phone)),
      child: BlocConsumer<AccountPhoneCubit, AccountPhoneState>(
        builder: (context, state) {
          final accountPhoneCubit = context.read<AccountPhoneCubit>();
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: AppBar(
              title: Text('手机号绑定', style: TextStyle(color: Colors.white, fontSize: 18)),
              centerTitle: true,
              backgroundColor: Color(0xFF7691FA),
              iconTheme: IconThemeData(
                color: Colors.white, // 设置返回图标按钮的颜色
              ),
            ),
            body: (state.phone != '' && !state.allowBind)
                ? Center(
                    child: Column(children: [
                      SizedBox(height: 120),
                      Text('已绑定手机号'),
                      Text(
                        '${state.phone.substring(0, 3)}****${state.phone.substring(7, 11)}',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 100),
                      Padding(
                          padding: EdgeInsets.all(80),
                          child: SizedBox(
                            width: double.infinity,
                            height: 47,
                            child: ElevatedButton(
                              onPressed: () {
                                context.read<AccountPhoneCubit>().change();
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Color(0xFF7691FA),
                                foregroundColor: Colors.white,
                                textStyle: TextStyle(fontSize: 19),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(23.5),
                                ),
                              ),
                              child: Text(
                                '更换绑定手机号',
                                style: TextStyle(
                                  fontSize: 19,
                                  fontWeight: FontWeight.w400,
                                  color: Color(0xFFFFFFFF),
                                ),
                                strutStyle: StrutStyle(height: 22 / 19),
                              ),
                            ),
                          )),
                    ]),
                  )
                : SingleChildScrollView(
                    child: Padding(
                      padding: EdgeInsets.all(60),
                      child: Column(
                        children: [
                          SizedBox(height: 120),
                          Container(
                            height: 60,
                            decoration: BoxDecoration(
                              color: Color(0xFFF7F9FF),
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: TextField(
                              controller: accountPhoneCubit.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, 22, 0, 19),
                                // 左右内边距，垂直居中
                                prefixIcon: Container(
                                  margin: EdgeInsets.only(left: 15), // 控制左边距
                                  child: Image.asset(
                                    'assets/images/login_v2/phone_small.png',
                                    width: 25.5,
                                    height: 25.5,
                                    fit: BoxFit.contain,
                                  ),
                                ),
                              ),
                              style: TextStyle(
                                fontSize: 18,
                                color: Color(0xFF000000),
                              ),
                            ),
                          ),
                          SizedBox(height: 20),
                          Container(
                            height: 60,
                            decoration: BoxDecoration(
                              color: Color(0xFFF7F9FF),
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: Stack(
                              children: [
                                TextField(
                                  controller: accountPhoneCubit.codeController,
                                  keyboardType: TextInputType.number,
                                  inputFormatters: [
                                    FilteringTextInputFormatter.digitsOnly,
                                    LengthLimitingTextInputFormatter(4), // 使用这个来限制长度
                                  ],
                                  decoration: InputDecoration(
                                    hintText: '请输入验证码',
                                    hintStyle: TextStyle(
                                      fontSize: 18,
                                      color: Color(0xFFCCCCCC),
                                    ),
                                    border: InputBorder.none,
                                    contentPadding: EdgeInsets.fromLTRB(0, 22, 0, 19),
                                    // 左右内边距，垂直居中
                                    prefixIcon: Container(
                                      margin: EdgeInsets.only(left: 15), // 控制左边距
                                      child: Image.asset(
                                        'assets/images/login_v2/secure_small.png',
                                        width: 25.5,
                                        height: 25.5,
                                        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) {
                                          accountPhoneCubit.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,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(height: 20),
                          SizedBox(
                            width: double.infinity,
                            height: 47,
                            child: ElevatedButton(
                              onPressed: () {
                                context.read<AccountPhoneCubit>().bind();
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Color(0xFF7691FA),
                                foregroundColor: Colors.white,
                                textStyle: TextStyle(fontSize: 19),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(23.5),
                                ),
                              ),
                              child: Text(
                                '绑定手机号',
                                style: TextStyle(
                                  fontSize: 19,
                                  fontWeight: FontWeight.w400,
                                  color: Color(0xFFFFFFFF),
                                ),
                                strutStyle: StrutStyle(height: 22 / 19),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
          );
        },
        listener: (context, state) {
          if (state.showSnackBar) {
            _showTip(context, state.snackBarMsg);
          }
        },
      ),
    );
  }

  void _showTip(BuildContext context, String tip) {
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 200,
        left: 20,
        right: 20,
        child: Material(
          color: Colors.transparent,
          child: Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.black54,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              tip,
              style: TextStyle(color: Colors.white),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );

    Overlay.of(context).insert(overlayEntry);
    Future.delayed(Duration(seconds: 2), () {
      overlayEntry.remove();
    });
  }
}