import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kaer_with_panels/app/common/app_run_data.dart';
import 'package:kaer_with_panels/app/widgets/kr_local_image.dart';
import '../controllers/kr_delete_account_controller.dart';
import 'package:kaer_with_panels/app/localization/app_translations.dart';

class KRDeleteAccountView extends GetView<KRDeleteAccountController> {
  const KRDeleteAccountView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text(
          AppTranslations.kr_userInfo.myAccount,
          style: TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.w500,
            color: Theme.of(context).textTheme.bodyMedium?.color,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Theme.of(context).textTheme.bodyMedium?.color,
          ),
          onPressed: () {
            // 先收起键盘
            FocusScope.of(context).unfocus();
            // 返回到首页
            Get.until((route) => route.isFirst);
          },
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(16.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 20.w),
              KrLocalImage(
                imageName: 'delete_account',
                width: 150.w,
                height: 150.w,
                imageType: ImageType.png,
              ),
              SizedBox(height: 20.w),
              Text(
                '${AppTranslations.kr_userInfo.myAccount} ${KRAppRunData.getInstance().kr_account}\n${AppTranslations.kr_userInfo.willBeDeleted}',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.bold,
                  color: Theme.of(context).textTheme.bodyMedium?.color,
                ),
              ),
              SizedBox(height: 20.w),
              Text(
                AppTranslations.kr_userInfo.deleteAccountWarning,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Theme.of(context).textTheme.bodySmall?.color,
                ),
              ),
              SizedBox(height: 20.w),
              // 验证码输入框
              Container(
                width: double.infinity,
                height: 52.w,
                decoration: ShapeDecoration(
                  color: Theme.of(context).cardColor,
                  shape: RoundedRectangleBorder(
                    side: BorderSide(width: 0.5, color: const Color(0xFFD2D2D2)),
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                ),
                child: Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 12.w),
                      child: Icon(
                        Icons.lock_outline,
                        size: 20.w,
                        color: Theme.of(context).textTheme.bodyMedium?.color,
                      ),
                    ),
                    SizedBox(width: 8.w),
                    Expanded(
                      child: TextField(
                        controller: controller.kr_codeController,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          hintText: 'login.enterCode'.tr,
                          hintStyle: Theme.of(context).textTheme.bodySmall?.copyWith(
                            fontSize: 14.sp,
                            fontFamily: 'AlibabaPuHuiTi-Regular',
                          ),
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.symmetric(vertical: 16.w),
                        ),
                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                          fontSize: 14.sp,
                          fontFamily: 'AlibabaPuHuiTi-Regular',
                        ),
                      ),
                    ),
                    if (controller.kr_codeHasText.value)
                      GestureDetector(
                        onTap: () {
                          controller.kr_codeController.clear();
                        },
                        child: Container(
                          height: double.infinity,
                          padding: EdgeInsets.symmetric(horizontal: 8.w),
                          child: Icon(
                            Icons.close,
                            size: 20.w,
                            color: Theme.of(context).textTheme.bodyMedium?.color,
                          ),
                        ),
                      ),
                    _buildSendCodeButton(context),
                  ],
                ),
              ),
              SizedBox(height: 20.w),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: controller.requestDeleteAccount,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.red,
                    padding: EdgeInsets.symmetric(vertical: 12.w),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.w),
                    ),
                  ),
                  child: Text(
                    AppTranslations.kr_userInfo.requestDelete,
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20.w),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSendCodeButton(BuildContext context) {
    return Obx(() => GestureDetector(
      onTap: controller.kr_canSendCode.value ? controller.kr_sendCode : null,
      child: Container(
        height: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 12.w),
        decoration: BoxDecoration(
          border: Border(
            left: BorderSide(
              width: 0.5,
              color: const Color(0xFFD2D2D2),
            ),
          ),
        ),
        child: Center(
          child: Text(
            controller.kr_canSendCode.value 
              ? AppTranslations.kr_login.sendCode
              : '${controller.kr_countdown}s',
            style: TextStyle(
              fontSize: 14.sp,
              color: controller.kr_canSendCode.value 
                ? const Color(0xFF2196F3)
                : Theme.of(context).textTheme.bodySmall?.color,
              fontFamily: 'AlibabaPuHuiTi-Regular',
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    ));
  }
}
