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

import '../../../app/routes/app_routes.dart';

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

  @override
  Widget build(BuildContext context) {
    // 获取 MyController 实例
    final MyController controller = Get.find<MyController>();
    // 获取 AuthController 实例，用于处理退出登录
    final AuthController authController = Get.find<AuthController>();

    return Scaffold(
      body: Stack(
        children: [
          // 顶部背景区域
          _buildBackground(),
          // 内容区域
          _buildContent(controller, authController),
        ],
      ),
    );
  }

  /// 顶部背景和用户信息部分
  Widget _buildBackground() {
    return Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: Container(
        height: 250.h,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [const Color(0xFF418CFC), const Color(0x713DBFFC)],
          ),
        ),
      ),
    );
  }

  /// 页面核心内容
  Widget _buildContent(MyController controller, AuthController authController) {
    return Positioned(
      top: 100.h,
      left: 20.w,
      right: 20.w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildUserInfoCard(controller),
          SizedBox(height: 20.h),
          _buildActionButtons(authController),
        ],
      ),
    );
  }

  /// 用户信息卡片
  Widget _buildUserInfoCard(MyController controller) {
    return Obx(
      () => Container(
        width: 335.w,
        height: 106.h,
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15.r),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withValues(alpha: 25.5),
              spreadRadius: 2,
              blurRadius: 5,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: Row(
          children: [
            // 用户头像
            Container(
              width: 60.w,
              height: 60.w,
              decoration: BoxDecoration(
                color: Colors.grey[200],
                shape: BoxShape.circle,
                border: Border.all(
                  color: Colors.grey.withValues(alpha: 102),
                  width: 1.w,
                ),
              ),
              // child: const Icon(
              //   Icons.person,
              //   size: 40,
              //   color: Color(0xFFC8E0FF),
              // ),
              child: Image.network(
                controller.userImage.value,
                // Show a CircularProgressIndicator while the image is loading
                loadingBuilder:
                    (
                      BuildContext context,
                      Widget child,
                      ImageChunkEvent? loadingProgress,
                    ) {
                      if (loadingProgress == null) {
                        return child;
                      }
                      return Center(
                        child: CircularProgressIndicator(
                          value: loadingProgress.expectedTotalBytes != null
                              ? loadingProgress.cumulativeBytesLoaded /
                                    loadingProgress.expectedTotalBytes!
                              : null,
                        ),
                      );
                    },
                // Show a placeholder icon if the image fails to load
                errorBuilder:
                    (
                      BuildContext context,
                      Object exception,
                      StackTrace? stackTrace,
                    ) {
                      return const Icon(
                        Icons.person,
                        size: 40,
                        color: Color(0xFFC8E0FF),
                      );
                    },
              ),
            ),
            SizedBox(width: 15.w),
            // 用户名和手机号
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  controller.userName.value,
                  style: TextStyle(
                    fontSize: 20.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  controller.userPhone.value,
                  style: TextStyle(fontSize: 14.sp, color: Colors.grey),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  /// 动作按钮区域
  Widget _buildActionButtons(AuthController authController) {
    return Column(
      children: [
        _buildActionButton(
          label: '修改密码',
          onTap: () {
            Get.toNamed(AppRoutes.changePassword);
          },
        ),
        SizedBox(height: 15.h),
        _buildActionButton(
          label: '退出登录',
          isLogout: true,
          onTap: () {
            // 调用 AuthController 的退出登录方法
            authController.logout();
          },
        ),
      ],
    );
  }

  /// 单个按钮
  Widget _buildActionButton({
    required String label,
    required VoidCallback onTap,
    bool isLogout = false,
  }) {
    return InkWell(
      onTap: onTap,
      child: Container(
        width: 335.w,
        height: 50.h,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.r),
          border: Border.all(color: const Color(0xFFEEEEEE)),
        ),
        child: Text(
          label,
          style: TextStyle(
            fontSize: 16.sp,
            color: isLogout ? const Color(0xFFE50000) : Colors.black,
            fontWeight: isLogout ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    );
  }
}