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 AccountPhonePageV2 extends StatelessWidget {
  const AccountPhonePageV2({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: const Text(
                '绑定手机号',
                style: TextStyle(
                  color: Color(0xFF333333),
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  height: 20 / 16,
                ),
              ),
              centerTitle: true,
              backgroundColor: Colors.white,
              elevation: 0,
              iconTheme: const IconThemeData(color: Colors.black),
            ),
            body: (state.phone != '' && !state.allowBind)
                ? _buildBound(context, state)
                : _buildForm(context, state, accountPhoneCubit),
          );
        },
        listener: (context, state) {},
      ),
    );
  }

  // 已绑定状态视图
  Widget _buildBound(BuildContext context, AccountPhoneState state) {
    return Column(
      children: [
        const SizedBox(height: 80),
        const Text(
          '已绑定手机号',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.normal,
            letterSpacing: 0,
            color: Color(0xFF333333),
          ),
        ),
        const SizedBox(height: 15),
        Text(
          '${state.phone.substring(0, 3)}****${state.phone.substring(7, 11)}',
          style: const TextStyle(
            fontSize: 21,
            fontWeight: FontWeight.bold,
            color: Color(0xFF333333),
          ),
        ),
        const Spacer(),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15, bottom: 15),
          child: SizedBox(
            width: double.infinity,
            height: 44,
            child: ElevatedButton(
              onPressed: () {
                context.read<AccountPhoneCubit>().change();
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF7691FA),
                foregroundColor: Colors.white,
                elevation: 0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(22),
                ),
              ),
              child: const Text(
                '更换绑定手机号',
                style: TextStyle(
                  fontSize: 16,
                  height: 20 / 16,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15, bottom: 40),
          child: SizedBox(
            width: double.infinity,
            height: 44,
            child: OutlinedButton(
              onPressed: () => _showUnbindDialog(context),
              style: OutlinedButton.styleFrom(
                foregroundColor: const Color(0xFF333333),
                side: const BorderSide(color: Color(0xFFE5E5E5), width: 0.5),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(26),
                ),
              ),
              child: const Text(
                '解绑',
                style: TextStyle(
                  fontSize: 16,
                  height: 20 / 16,
                  color: Color(0xFF333333),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  void _showUnbindDialog(BuildContext context) {
    showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext ctx) {
        return AlertDialog(
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            ),
          ),
          title: const Text(
            '提示',
            style: TextStyle(
              fontSize: 17,
              color: Color(0xFF000000),
            ),
            textAlign: TextAlign.center,
          ),
          content: const Text.rich(
            TextSpan(
              text: '解绑后将无法继续使用手机号登录该班小二账号',
              style: TextStyle(color: Color(0xFF666666), fontSize: 14),
            ),
          ),
          actions: [
            Table(
              children: [
                TableRow(
                  children: [
                    TableCell(
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(ctx).pop();
                        },
                        style: TextButton.styleFrom(
                          foregroundColor: const Color(0xFF333333),
                          textStyle: const TextStyle(fontSize: 17),
                          minimumSize: const Size.fromHeight(40),
                          padding: EdgeInsets.zero,
                          shape: const RoundedRectangleBorder(
                            borderRadius: BorderRadius.zero,
                          ),
                        ),
                        child: const Text('取消'),
                      ),
                    ),
                    TableCell(
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(ctx).pop();
                          context.read<AccountPhoneCubit>().unbindPhone();
                        },
                        style: TextButton.styleFrom(
                          foregroundColor: const Color(0xFF7691FA),
                          textStyle: const TextStyle(fontSize: 17),
                          minimumSize: const Size.fromHeight(40),
                          padding: EdgeInsets.zero,
                          shape: const RoundedRectangleBorder(
                            borderRadius: BorderRadius.zero,
                          ),
                        ),
                        child: const Text('确定'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        );
      },
    );
  }

  // 绑定表单视图
  Widget _buildForm(BuildContext context, AccountPhoneState state, AccountPhoneCubit accountPhoneCubit) {
    return Column(
      children: [
        const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
        // 手机号行
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 17),
          child: Row(
            children: [
              const Text(
                '手机号',
                style: TextStyle(
                  fontSize: 16,
                  height: 1.0,
                  color: Color(0xFF333333),
                ),
              ),
              const SizedBox(width: 35.5),
              Expanded(
                child: TextField(
                  controller: accountPhoneCubit.phoneController,
                  keyboardType: TextInputType.phone,
                  inputFormatters: [
                    FilteringTextInputFormatter.digitsOnly,
                    LengthLimitingTextInputFormatter(11),
                    FilteringTextInputFormatter.allow(RegExp(r'^1[0-9]{0,10}$')),
                  ],
                  decoration: const InputDecoration(
                    hintText: '请输入手机号',
                    hintStyle: TextStyle(
                      fontSize: 16,
                      height: 1.0,
                      color: Color(0xFFCCCCCC),
                    ),
                    border: InputBorder.none,
                    isDense: true,
                    contentPadding: EdgeInsets.zero,
                  ),
                  style: const TextStyle(
                    fontSize: 16,
                    height: 1.0,
                    color: Color(0xFF333333),
                  ),
                ),
              ),
            ],
          ),
        ),
        const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
        // 验证码行
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
          child: Row(
            children: [
              const SizedBox(
                child: Text(
                  '验证码',
                  style: TextStyle(
                    fontSize: 16,
                    height: 1.0,
                    color: Color(0xFF333333),
                  ),
                ),
              ),
              const SizedBox(width: 35.5),
              Expanded(
                child: TextField(
                  controller: accountPhoneCubit.codeController,
                  keyboardType: TextInputType.number,
                  inputFormatters: [
                    FilteringTextInputFormatter.digitsOnly,
                    LengthLimitingTextInputFormatter(4),
                  ],
                  decoration: const InputDecoration(
                    hintText: '请输入验证码',
                    hintStyle: TextStyle(
                      fontSize: 16,
                      height: 1.0,
                      color: Color(0xFFCCCCCC),
                    ),
                    border: InputBorder.none,
                    isDense: true,
                    contentPadding: EdgeInsets.zero,
                  ),
                  style: const TextStyle(
                    fontSize: 16,
                    height: 1.0,
                    color: Color(0xFF333333),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  if (state.allowSend) {
                    accountPhoneCubit.sendVerificationCode();
                  }
                },
                child: Text(
                  state.allowSend ? '发送验证码' : '${state.seconds}s后可重发',
                  style: const TextStyle(
                    fontSize: 16,
                    height: 1.0,
                    color: Color(0xFF7691FA),
                  ),
                ),
              ),
            ],
          ),
        ),
        const Divider(height: 1, thickness: 0.5, color: Color(0xFFE5E5E5)),
        const SizedBox(height: 15),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15),
          child: SizedBox(
            width: double.infinity,
            height: 44,
            child: ElevatedButton(
              onPressed: state.allowSubmit
                  ? () {
                      context.read<AccountPhoneCubit>().bind();
                    }
                  : null,
              style: ElevatedButton.styleFrom(
                backgroundColor: state.allowSubmit
                    ? const Color(0xFF7691FA)
                    : const Color(0xFFB8C4FC),
                disabledBackgroundColor: const Color(0xFFB8C4FC),
                foregroundColor: Colors.white,
                disabledForegroundColor: Colors.white,
                elevation: 0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(26),
                ),
              ),
              child: const Text(
                '绑定手机号',
                style: TextStyle(
                  fontSize: 16,
                  height: 20 / 16,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}