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

import 'login_controller.dart';

class LoginView extends GetView<LoginController> {
  const LoginView({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 收起键盘
        FocusScope.of(context).unfocus();
      },
      child: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: _buildBody(),
          ),
        ),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      height: 1.sh,
      margin: EdgeInsets.symmetric(vertical: 48.h),
      padding: EdgeInsets.symmetric(horizontal: 32.w),
      child: Column(
        children: [
          _buildTitle(),
          SizedBox(
            height: 32.h,
          ),
          _buildPhoneInputAndLoginButton(),
          SizedBox(
            height: 32.h,
          ),
          _buildPrivacyPolicy(),
        ],
      ),
    );
  }

  Widget _buildTitle() {
    return SizedBox(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '欢迎使用斯凯签勤'.tr,
            style: TextStyle(
              fontSize: 22.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
          SizedBox(
            height: 4.h,
          ),
          Text(
            '未注册手机号验证后将自动创建账号'.tr,
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w500,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }

  _buildPhoneInputAndLoginButton() {
    return Obx(
      () => Column(
        children: [
          TextField(
            controller: controller.phoneController,
            keyboardType: TextInputType.phone,
            textInputAction: TextInputAction.done,
            maxLength: controller.phoneNumberSize,
            decoration: InputDecoration(
              counterText: '',
              hintText: '请输入手机号码'.tr,
              border: const UnderlineInputBorder(),
              // 获取焦点时的边框
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: controller.isFormValid.value
                      ? Colors.blue
                      : Colors.blue.withOpacity(0.5),
                ), //
                // 🔥 你想要的颜色
              ),
            ),
          ),
          SizedBox(
            height: 24.h,
          ),
          ElevatedButton(
            onPressed: controller.isFormValid.value
                ? controller.requestPhoneCode
                : null,
            style: ButtonStyle(
              minimumSize:
                  MaterialStateProperty.all(Size(double.infinity, 44.h)),
              shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8.r),
                ),
              ),
              backgroundColor: MaterialStateProperty.all(
                controller.isFormValid.value
                    ? Colors.blue
                    : Colors.blue.withOpacity(0.5),
              ),
            ),
            child: Text(
              '获取验证码'.tr,
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(
            height: 22.h,
          ),
          TextButton(
            onPressed: () {},
            child: Text(
              '密码登录'.tr,
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                color: Colors.grey,
              ),
            ),
          )
        ],
      ),
    );
  }

  _buildPrivacyPolicy() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Radio(
          value: '1',
          groupValue: 1,
          onChanged: (value) {},
        ),
      ],
    );
  }
}