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

import 'package:nomo/app/base/base_view.dart';
import 'package:nomo/app/widgets/ix_image.dart';
import 'package:nomo/app/widgets/submit_btn.dart';
import 'package:nomo/config/theme/theme_extensions/theme_extension.dart';
import '../../../../config/translations/strings_enum.dart';
import '../../../constants/assets.dart';
import '../../../routes/app_pages.dart';
import '../../../widgets/privacy_agreement.dart';
import '../controllers/splash_controller.dart';

class SplashView extends BaseView<SplashController> {
  const SplashView({super.key});

  @override
  bool get resizeToAvoidBottomInset => false;

  @override
  Widget buildContent(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          Expanded(child: _buildContent()),

          // 底部内容
          _buildBottomContent(),
        ],
      ),
    );
  }

  // 已登录状态的内容
  Widget _buildContent() {
    return Center(
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          // 背景世界地图
          Obx(
            () => AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeInOut,
              transform: Matrix4.translationValues(
                0,
                !controller.hasLogin ? -120.w : 0,
                0,
              ),
              child: Container(
                margin: EdgeInsets.only(top: 250.w),
                child: IXImage(
                  source: Assets.splashCenterBg,
                  width: 356.w,
                  height: 356.w,
                  sourceType: ImageSourceType.asset,
                ),
              ),
            ),
          ),
          // Logo
          Obx(
            () => AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeInOut,
              transform: Matrix4.translationValues(
                0,
                !controller.hasLogin ? -120.w : 0,
                0,
              ),
              child: Container(
                margin: EdgeInsets.only(top: 172.w),
                child: IXImage(
                  source: Assets.splashLogo,
                  width: 104.w,
                  height: 148.w,
                  sourceType: ImageSourceType.asset,
                ),
              ),
            ),
          ),
          // 文字内容 - 根据 hasLogin 状态渐变显示
          Obx(
            () => AnimatedOpacity(
              opacity: !controller.hasLogin ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 1000),
              child: FadeIn(
                duration: const Duration(milliseconds: 1000),
                delay: const Duration(milliseconds: 1500),
                child: Container(
                  margin: EdgeInsets.only(top: 240.w),
                  child: Text(
                    Strings.secureYourConnection.tr,
                    style: TextStyle(
                      fontSize: 28.sp,
                      color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                    ),
                  ),
                ),
              ),
            ),
          ),

          Obx(
            () => AnimatedOpacity(
              opacity: !controller.hasLogin ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 1000),
              child: FadeIn(
                duration: const Duration(milliseconds: 1000),
                delay: const Duration(milliseconds: 1500),
                child: Container(
                  width: 327.w,
                  margin: EdgeInsets.only(top: 298.w),
                  padding: EdgeInsets.symmetric(horizontal: 14.w),
                  child: Text(
                    Strings.secureYourConnectionDesc.tr,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 16.sp,
                      height: 1.4,
                      color: Get.reactiveTheme.hintColor,
                    ),
                  ),
                ),
              ),
            ),
          ),

          // 按钮区域
          Obx(
            () => AnimatedOpacity(
              opacity: !controller.hasLogin ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 1000),
              child: FadeInUp(
                duration: const Duration(milliseconds: 1000),
                delay: const Duration(milliseconds: 1500),
                child: Container(
                  margin: EdgeInsets.only(top: 420.w),
                  padding: EdgeInsets.symmetric(horizontal: 14.w),
                  child: Column(
                    children: [
                      // 登录按钮
                      SubmitButton(
                        text: Strings.loginButton.tr,
                        bgColor: Get.reactiveTheme.highlightColor,
                        textColor: ReactiveTheme.isLightTheme
                            ? Get.reactiveTheme.primaryColor
                            : null,
                        onPressed: () => Get.toNamed(Routes.LOGIN),
                      ),
                      20.verticalSpaceFromWidth,
                      SubmitButton(
                        text: Strings.signupButton.tr,
                        onPressed: () => Get.toNamed(Routes.SIGNUP),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建底部内容
  Widget _buildBottomContent() {
    return Container(
      height: 100.w,
      alignment: Alignment.bottomCenter,
      child: Obx(
        () => !controller.hasLogin
            ? FadeInUp(
                duration: const Duration(milliseconds: 700),
                delay: const Duration(milliseconds: 800),
                child: PrivacyAgreement(
                  textColor: Get.reactiveTheme.textTheme.bodyLarge!.color,
                  linkColor: Get.reactiveTheme.primaryColor,
                  height: 1.8,
                ),
              )
            : FadeInUp(
                duration: const Duration(milliseconds: 600),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Obx(
                      () => controller.showLoading
                          ? SpinKitRing(
                              size: 24.w,
                              lineWidth: 2.w,
                              color: Get.reactiveTheme.primaryColor,
                            )
                          : const SizedBox.shrink(),
                    ),
                    16.verticalSpaceFromWidth,
                    Text(
                      'V${controller.versionName}',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Get.reactiveTheme.textTheme.bodyLarge!.color,
                        fontSize: 14.sp,
                      ),
                    ),
                  ],
                ),
              ),
      ),
    );
  }
}