import 'package:dating_touchme_app/controller/mine/login_controller.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/pages/mine/open_webview.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetX<LoginController>(
      init: LoginController(),
      builder: (controller){
        return Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: !(controller.isSend.value) ? Container(
              width: 375.w,
              padding: EdgeInsets.only(
                  top: 310.w,
                  left: 25.w,
                  right: 25.w
              ),
              child: Column(
                children: [
                  Container(
                    height: 52.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(9.w)),
                        border: Border.all(width: 1.w, color: const Color.fromRGBO(230, 230, 230, 1))
                    ),
                    child: Center(
                      child: TextField(
                        decoration: const InputDecoration(
                          hintText: '请输入你的手机号',
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.symmetric(
                            horizontal: 15,
                            vertical: 0,
                          ),
                          counterText: '',
                        ),
                        keyboardType: TextInputType.phone,
                        inputFormatters: [
                          // 只允许 0-9
                          FilteringTextInputFormatter.digitsOnly,
                        ],
                        maxLength: 11,
                        onChanged: (value) {
                          controller.phoneNumber.value = value;
                        },
                        style: const TextStyle(fontSize: 16),
                      ),
                    ),
                  ),
                  SizedBox(height: 10.w,),
                  Text(
                    "未注册的手机号将在登录后自动注册",
                    style: TextStyle(
                        fontSize: 11.w,
                        color: const Color.fromRGBO(189, 189, 189, 1)
                    ),
                  ),
                  SizedBox(height: 30.w,),
                  Container(
                    width: 325.w,
                    height: 52.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(52.w)),
                        gradient: controller.phoneNumber.value.isNotEmpty ? LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(131, 89, 255, 1),
                            Color.fromRGBO(61, 138, 224, 1),
                          ],
                        ) : null,
                        color: const Color.fromRGBO(217, 217, 217, 1)
                    ),
                    child: Center(
                      child: Text(
                        "获取验证码",
                        style: TextStyle(
                            fontSize: 18.w,
                            color: Colors.white
                        ),
                      ),
                    ),
                  ).onTap(() {
                    controller.isSendingCode.value ||
                        controller.countdownSeconds.value > 0
                        ? null
                        : controller.getVerificationCode();
                  }),


                  // 协议同意复选框
                  Row(
                    children: [
                      Checkbox(
                        value: controller.checked.value,
                        onChanged: (value) {
                          controller.checked.value = value ?? false;
                        },
                        activeColor: const Color.fromRGBO(117, 98, 249, 1),
                        side: const BorderSide(color: Colors.grey),
                        shape: const CircleBorder(),
                        materialTapTargetSize:
                        MaterialTapTargetSize.shrinkWrap,
                      ),
                      const Text(
                        '我已阅读并同意',
                        style: TextStyle(
                          fontSize: 11,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到用户协议页面
                          Get.to(() => OpenWebView(url: "https://www.quzhaoqin.com/privacy.html"));
                        },
                        child: const Text(
                          '《用户协议》',
                          style: TextStyle(
                            fontSize: 11,
                            color: Color.fromRGBO(74, 99, 235, 1),
                          ),
                        ),
                      ),
                      const Text(
                        '和',
                        style: TextStyle(
                          fontSize: 11,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到隐私政策页面
                          Get.to(() => OpenWebView(url: "https://www.quzhaoqin.com/information.html"));
                        },
                        child: const Text(
                          '《隐私政策》',
                          style: TextStyle(
                            fontSize: 11,
                            color: Color.fromRGBO(74, 99, 235, 1),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ) : Container(
              width: 375.w,
              padding: EdgeInsets.only(
                  top: 271.w,
                  left: 25.w,
                  right: 25.w
              ),
              child: Column(
                children: [
                  Text(
                    "已发送到${controller.phoneNumber.value}",
                    style: TextStyle(
                        fontSize: 14.w
                    ),
                  ),
                  SizedBox(height: 20.w,),

                  Pinput(
                    length: 6,
                    controller: controller.passwordController.value,
                    inputFormatters: [
                      // 只允许 0-9
                      FilteringTextInputFormatter.digitsOnly,
                    ],
                    onCompleted: (pin) {
                      controller.verificationCode.value = pin;
                      controller.isLoggingIn.value
                          ? null
                          : controller.login();
                    },
                  ),
                  SizedBox(height: 40.w,),
                  Container(
                    width: 325.w,
                    height: 52.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(52.w)),
                        gradient: controller.countdownSeconds.value <= 0 ? LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            Color.fromRGBO(131, 89, 255, 1),
                            Color.fromRGBO(61, 138, 224, 1),
                          ],
                        ) : null,
                        color: const Color.fromRGBO(217, 217, 217, 1)
                    ),
                    child: Center(
                      child: Text(
                        controller.countdownSeconds.value > 0 ? "获取验证码 ${controller.countdownSeconds.value}s" : "获取验证码",
                        style: TextStyle(
                            fontSize: 18.w,
                            color: Colors.white
                        ),
                      ),
                    ),
                  ).onTap(() {
                    controller.isSendingCode.value ||
                        controller.countdownSeconds.value > 0
                        ? null
                        : controller.getVerificationCode();
                  }),



                  const SizedBox(height: 24),

                  // 协议同意复选框
                  Row(
                    children: [
                      Checkbox(
                        value: controller.checked.value,
                        onChanged: (value) {
                          controller.checked.value = value ?? false;
                        },
                        activeColor: const Color.fromRGBO(117, 98, 249, 1),
                        side: const BorderSide(color: Colors.grey),
                        shape: const CircleBorder(),
                        materialTapTargetSize:
                        MaterialTapTargetSize.shrinkWrap,
                      ),
                      const Text(
                        '我已阅读并同意',
                        style: TextStyle(
                          fontSize: 11,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到用户协议页面
                          Get.to(() => OpenWebView(url: "https://www.quzhaoqin.com/privacy.html"));
                        },
                        child: const Text(
                          '《用户协议》',
                          style: TextStyle(
                            fontSize: 11,
                            color: Color.fromRGBO(74, 99, 235, 1),
                          ),
                        ),
                      ),
                      const Text(
                        '和',
                        style: TextStyle(
                          fontSize: 11,
                          color: Color.fromRGBO(153, 153, 153, 1),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到隐私政策页面
                          Get.to(() => OpenWebView(url: "https://www.quzhaoqin.com/information.html"));
                        },
                        child: const Text(
                          '《隐私政策》',
                          style: TextStyle(
                            fontSize: 11,
                            color: Color.fromRGBO(74, 99, 235, 1),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}