import 'package:english_learning/features/auth/screens/signup/signup_screen.dart';
import 'package:english_learning/features/onboarding/data/onboarding_data.dart';
import 'package:english_learning/core/widgets/global_button.dart';
import 'package:english_learning/core/widgets/slider_widget.dart';
import 'package:english_learning/core/utils/styles/theme.dart';
import 'package:flutter/material.dart';

class OnBoardingScreen extends StatefulWidget {
  const OnBoardingScreen({super.key});

  @override
  State<OnBoardingScreen> createState() => _OnBoardingScreenState();
}

class _OnBoardingScreenState extends State<OnBoardingScreen> {
  final controller = OnBoardingData();
  final PageController _pageController = PageController();
  int _currentPage = 0;

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _onPageChanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  void _nextPage() {
    if (_currentPage < controller.onBoardingData.length - 1) {
      _pageController.nextPage(
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeInOut,
      );
    } else {
      // Handle what happens when the onboarding is complete
    }
  }

  void _skipToLastPage() {
    _pageController.animateToPage(
      controller.onBoardingData.length - 1,
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final screenHeight = mediaQuery.size.height;

    return Scaffold(
      backgroundColor: AppColors.whiteColor,
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              onPageChanged: _onPageChanged,
              itemCount: controller.onBoardingData.length,
              itemBuilder: (context, index) {
                final item = controller.onBoardingData[index];
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(height: screenHeight * 0.15),
                      Text(
                        item.title,
                        style: AppTextStyles.blueTextStyle.copyWith(
                          fontSize: 30,
                          fontWeight: FontWeight.w900,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        item.description,
                        style: AppTextStyles.tetriaryTextStyle.copyWith(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      SizedBox(height: screenHeight * 0.05),
                      Center(
                        child: Image.asset(
                          item.image,
                          width: item.imageWidth,
                          height: item.imageHeight,
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              children: [
                SliderWidget(
                  currentPage: _currentPage,
                  itemCount: controller.onBoardingData.length,
                ),
                SizedBox(height: screenHeight * 0.08),
                if (_currentPage == controller.onBoardingData.length - 1)
                  Column(
                    children: [
                      GlobalButton(
                        text: 'Join Now',
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => const SignupScreen()),
                          );
                        },
                      ),
                    ],
                  )
                else
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12),
                          border: Border.all(
                            color: AppColors.disableColor,
                            width: 0.5,
                          ),
                        ),
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.transparent,
                            shadowColor: Colors.transparent,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(12.0),
                            ),
                          ),
                          onPressed: _skipToLastPage,
                          child: Padding(
                            padding: const EdgeInsets.symmetric(
                              vertical: 14.0,
                              horizontal: 18.0,
                            ),
                            child: Text(
                              'Skip',
                              style: AppTextStyles.disableTextStyle.copyWith(
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 12),
                      Expanded(
                        child: GlobalButton(
                          text: 'Continue',
                          icon: Icons.arrow_forward,
                          onPressed: _nextPage,
                          spaceBetween: true,
                        ),
                      ),
                    ],
                  ),
              ],
            ),
          ),
          SizedBox(height: screenHeight * 0.1),
        ],
      ),
    );
  }
}