import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/intro/intro_controller.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:keyboard/resource/string.gen.dart';
import 'package:lottie/lottie.dart';
import 'package:nested_scroll_views/material.dart';

import '../../resource/assets.gen.dart';
import '../../resource/colors.gen.dart';
import '../../router/app_pages.dart';

class IntroPage extends BasePage<IntroController> {
  const IntroPage({super.key});

  static void start() {
    Get.toNamed(RoutePath.intro);
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvokedWithResult: (didPop, result) async {
        if (didPop) {
          return;
        }
        controller.clickBack();
      },
      child: Stack(
        children: [
          Assets.images.bgIntro.image(width: double.infinity, fit: BoxFit.fill),
          SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: SafeArea(
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(height: 42.w),
                      Assets.images.iconIntroTitle.image(
                        width: 189.w,
                        height: 40.6.w,
                        fit: BoxFit.contain,
                      ),
                      SizedBox(height: 20.w),
                      Flexible(
                        child: NestedPageView(
                          controller: controller.pageController.value,
                          onPageChanged: (index) {
                            controller.onPageChanged(index);
                          },
                          children: List.generate(
                            controller.pageList.length,
                            (index) =>
                                buildPage(controller.pageList[index], index),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      buildIndicator(),
                      SizedBox(height: 50.w),
                      _buildCustomButton(),
                      SizedBox(height: 25.w),
                      _buildGoToLoginButton(),
                      SizedBox(height: 50.w),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildIndicator() {
    return Obx(() {
      int totalPages = controller.pageList.length;
      int currentPage = controller.currentPage.value;

      return Container(
        width: 50.w,
        height: 10.h,
        decoration: BoxDecoration(
          color: const Color(0xF0F4EEFF),
          borderRadius: BorderRadius.circular(5.r),
        ),
        padding: EdgeInsets.all(2.w),

        child: Align(
          alignment: Alignment.centerLeft,
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            width: (50.w - 4.w) / totalPages,

            height: double.infinity,
            margin: EdgeInsets.only(
              left: ((50.w - 4.w) / totalPages) * currentPage,
            ),
            decoration: BoxDecoration(
              color: const Color(0xffa084ff),
              borderRadius: BorderRadius.circular(3.r),
            ),
          ),
        ),
      );
    });
  }

  Widget buildPage(PageBean pageBean, int index) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        pageBean.title,
        SizedBox(height: 20.h),

        Lottie.asset(
          pageBean.animUrl,
          width: 360.w,
          repeat: true,
          fit: BoxFit.contain,
        ),
      ],
    );
  }

  Widget _buildCustomButton() {
    return Container(
      height: 48.w,
      margin: EdgeInsets.only(left: 50.w, right: 50.w),
      child: Material(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(50.r),
        child: InkWell(
          borderRadius: BorderRadius.circular(50.r),
          onTap: () {
            controller.clickCustomButton();
          },
          child: Ink(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                transform: GradientRotation(0.5),
                colors: [Color(0xFF7D46FC), Color(0xFFBC87FF)],
              ),
              borderRadius: BorderRadius.circular(50.r),
              boxShadow: [
                BoxShadow(
                  color: Color(0x66BDA8C9),
                  blurRadius: 10.r,
                  offset: Offset(0, 4),
                  spreadRadius: 0,
                ),
              ],
            ),
            child: Center(
              child: Text(
                StringName.customLoveKeyboard,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  _buildGoToLoginButton() {
    return InkWell(
      onTap: controller.clickLogin,
      child: Text(
        StringName.goToLogin,
        style: TextStyle(
          color: const Color(0xFF8649FF),
          fontSize: 14.sp,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
}