import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../../components/page_appbar.dart';
import '../../controller/mine/phone_controller.dart';

class PhonePage extends StatelessWidget {
  PhonePage({super.key});

  final PhoneController controller = Get.put(PhoneController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xffFFFFFF),
        appBar: PageAppbar(title: "手机认证", bottom: true),
        body: Obx(() {
          return IndexedStack(
            index: controller.tabIndex.value,
            children: [
              // 推荐列表
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
                  crossAxisAlignment: CrossAxisAlignment.center, // 水平居中
                  children: [
                    const Text('已经认证的手机号码', style: TextStyle(fontSize: 18, color: Color(0xFF999999))),
                    const SizedBox(height: 12),
                    Text(_encryptPhone(controller.phone.value), style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold)),
                    SizedBox(height: 64),
                    // TDButton(
                    //   text: '更换手机号码',
                    //   width: MediaQuery.of(context).size.width - 50,
                    //   size: TDButtonSize.large,
                    //   type: TDButtonType.fill,
                    //   shape: TDButtonShape.round,
                    //   style: TDButtonStyle(
                    //     textColor: Colors.white,
                    //     backgroundColor: Color(0xFF7562F9),
                    //   ),
                    //   activeStyle: TDButtonStyle(
                    //     textColor: Colors.white,
                    //     backgroundColor: Color(0xC37562F9),
                    //   ),
                    //   onTap: (){
                    //     controller.tabIndex.value = 1;
                    //   },
                    // ),
                    // SizedBox(height: 200),
                  ],
                ),
              ),
              // 同城列表
              Center(
                child: Column(
                  children: [
                    const SizedBox(height:32),
                    const Text('请输入新的手机号码', style: TextStyle(fontSize: 16, color: Color(0xFF333333))),
                    const SizedBox(height: 8),
                    const Text('手机号码仅用于登录和账号保护', style: TextStyle(fontSize: 14, color: Color(0xFF999999))),
                    const SizedBox(height: 56),
                    TDInput(
                        type: TDInputType.cardStyle,
                        inputType: TextInputType.phone,
                        maxLength: 11,
                        cardStyle: TDCardStyle.topText,
                        width: MediaQuery.of(context).size.width - 50,
                        hintText: '请输入你的手机号',
                        onChanged: (text) {
                          controller.phoneNumber.value = text;
                        }
                    ),
                    const SizedBox(height: 24),
                    TDInput(
                        type: TDInputType.cardStyle,
                        inputType: TextInputType.number,
                        maxLength: 6,
                        cardStyle: TDCardStyle.topText,
                        width: MediaQuery.of(context).size.width - 50,
                        hintText: '请输入验证码',
                        onChanged: (text) {
                          controller.verificationCode.value = text;
                        },
                        rightBtn: SizedBox(
                          width: 100,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(right: 10),
                                child: Container(
                                  width: 0.5,
                                  height: 24,
                                  color: TDTheme.of(context).grayColor3,
                                ),
                              ),
                              controller.countdownSeconds.value > 0 ?
                              TDText('${controller.countdownSeconds.value}秒后重试', textColor: TDTheme.of(context).fontGyColor4)
                                  : TDText('获取验证码', textColor: Color(0xFF7562F9)),
                            ],
                          ),
                        ),
                        needClear: false,
                        onBtnTap: () {
                          controller.getVerificationCode();
                        }
                    ),
                    const SizedBox(height: 48),
                    TDButton(
                      text: '确定更换',
                      width: MediaQuery.of(context).size.width - 50,
                      size: TDButtonSize.large,
                      type: TDButtonType.fill,
                      shape: TDButtonShape.round,
                      style: TDButtonStyle(
                        textColor: Colors.white,
                        backgroundColor: Color(0xFF7562F9),
                      ),
                      activeStyle: TDButtonStyle(
                        textColor: Colors.white,
                        backgroundColor: Color(0xC37562F9),
                      ),
                      onTap: (){
                        controller.changePhone();
                      },
                    ),
                  ],
                ),
              )
            ],
          );
        })
    );
  }

  String _encryptPhone(String phone) {
    if (phone.isEmpty) return '';
    if (phone.length < 7) return phone;

    // 保留前3位和后4位，中间用*代替
    String start = phone.substring(0, 3);
    String end = phone.substring(phone.length - 4);
    String middle = '*' * (phone.length - 7);

    return '$start$middle$end';
  }

}