import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:problem_check_system/modules/my/controllers/change_password_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    // 获取控制器实例
    final ChangePasswordController controller = Get.find<ChangePasswordController>();

    return Scaffold(
      appBar: _buildAppBar(),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.w),
        child: Column(
          children: [
            SizedBox(height: 16.h),
            _buildInputField(
              label: '新密码',
              hintText: '请输入新密码',
              onChanged: controller.updateNewPassword,
              obscureText: true,
            ),
            SizedBox(height: 24.h),
            _buildInputField(
              label: '确认新密码',
              hintText: '请再次输入新密码',
              onChanged: controller.updateConfirmPassword,
              obscureText: true,
            ),
            const Spacer(), // 占据剩余空间
            _buildButtons(controller),
            SizedBox(height: 50.h),
          ],
        ),
      ),
    );
  }

  /// 自定义 AppBar
  AppBar _buildAppBar() {
    return AppBar(
      backgroundColor: const Color(0xFFF1F7FF),
      elevation: 0,
      centerTitle: true,
      title: const Text(
        '修改密码',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
      leading: IconButton(
        icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
        onPressed: () => Get.back(),
      ),
    );
  }

  /// 输入框组件
  Widget _buildInputField({
    required String label,
    required String hintText,
    required Function(String) onChanged,
    bool obscureText = false,
  }) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 2,
            blurRadius: 5,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            label,
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
          ),
          SizedBox(height: 8.h),
          TextField(
            onChanged: onChanged,
            obscureText: obscureText,
            decoration: InputDecoration(
              hintText: hintText,
              hintStyle: TextStyle(
                color: Colors.grey,
                fontSize: 14.sp,
              ),
              border: InputBorder.none, // 移除下划线
              isDense: true,
              contentPadding: EdgeInsets.zero,
            ),
          ),
        ],
      ),
    );
  }

  /// 底部按钮区域
  Widget _buildButtons(ChangePasswordController controller) {
    return Row(
      children: [
        // 取消按钮
        Expanded(
          child: OutlinedButton(
            onPressed: () => Get.back(),
            style: OutlinedButton.styleFrom(
              minimumSize: Size(160.w, 48.h),
              side: const BorderSide(color: Color(0xFF5695FD)),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.r),
              ),
            ),
            child: Text(
              '取消',
              style: TextStyle(
                fontSize: 16.sp,
                color: const Color(0xFF5695FD),
              ),
            ),
          ),
        ),
        SizedBox(width: 16.w),
        // 确定按钮
        Expanded(
          child: ElevatedButton(
            onPressed: () {
              // 调用控制器中的修改密码方法
              controller.changePassword();
            },
            style: ElevatedButton.styleFrom(
              minimumSize: Size(160.w, 48.h),
              backgroundColor: const Color(0xFF5695FD),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.r),
              ),
            ),
            child: Text(
              '确定',
              style: TextStyle(
                fontSize: 16.sp,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    );
  }
}