import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:english_learning/features/auth/provider/user_provider.dart';
import 'package:english_learning/features/history/screens/history_screen.dart';
import 'package:english_learning/features/home/data/card_data.dart';
import 'package:english_learning/features/home/widgets/progress_card.dart';
import 'package:english_learning/features/home/widgets/welcome_card.dart';
import 'package:english_learning/features/learning/screens/learning_screen.dart';
import 'package:english_learning/features/settings/modules/edit_profile/screens/edit_profile_screen.dart';
import 'package:english_learning/features/settings/screens/settings_screen.dart';
import 'package:english_learning/core/widgets/slider_widget.dart';
import 'package:english_learning/core/utils/styles/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:provider/provider.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();

  static void navigateReplacing(BuildContext context) {
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (context) => const HomeScreen()),
    );
  }
}

class _HomeScreenState extends State<HomeScreen> {
  final PageController _pageController = PageController();
  int _selectedIndex = 0;

  final List<Widget> _screens = [
    const HomeContent(),
    const LearningScreen(),
    const HistoryScreen(),
    const SettingsScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: AppColors.bgSoftColor,
        child: PageView(
          physics: const NeverScrollableScrollPhysics(),
          controller: _pageController,
          children: _screens,
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          gradient: AppColors.gradientTheme,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.only(
            top: 20,
            bottom: 24,
            left: 16,
            right: 16,
          ),
          child: GNav(
            activeColor: AppColors.blueColor,
            tabBackgroundColor: AppColors.whiteColor,
            tabBorderRadius: 100,
            color: AppColors.whiteColor,
            iconSize: 20,
            gap: 8,
            selectedIndex: _selectedIndex,
            onTabChange: (index) {
              setState(() {
                _selectedIndex = index;
                _pageController.animateToPage(
                  index,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeInOut, // Animasi ketika berpindah tab
                );
              });
            },
            padding: const EdgeInsets.symmetric(
              horizontal: 16,
              vertical: 8,
            ),
            tabs: const [
              GButton(
                icon: BootstrapIcons.house,
                text: 'Home',
              ),
              GButton(
                icon: BootstrapIcons.book,
                text: 'Learning',
              ),
              GButton(
                icon: BootstrapIcons.clock_history,
                text: 'History',
              ),
              GButton(
                icon: BootstrapIcons.gear,
                text: 'Settings',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<HomeContent> createState() => _HomeContentState();
}

class _HomeContentState extends State<HomeContent> {
  final CardData cardData = CardData();
  int _currentPage = 0;
  bool hasOngoingExercises = false;

  @override
  Widget build(BuildContext context) {
    return Consumer<UserProvider>(builder: (context, authProvider, child) {
      final userName = authProvider.getUserName() ?? 'Guest';

      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    width: double.infinity,
                    decoration: BoxDecoration(
                      gradient: AppColors.gradientTheme,
                      borderRadius: const BorderRadius.only(
                        bottomLeft: Radius.circular(24),
                        bottomRight: Radius.circular(24),
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(
                        top: 60.0,
                        left: 18.34,
                        right: 16.0,
                        bottom: 34.0,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  SvgPicture.asset(
                                    'lib/features/home/assets/images/Logo.svg',
                                    width: 31,
                                  ),
                                  const SizedBox(width: 4.34),
                                  Text(
                                    'SEALS',
                                    style: AppTextStyles.logoTextStyle.copyWith(
                                      fontSize: 28,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                ],
                              ),
                              GestureDetector(
                                onTap: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) =>
                                          const EditProfileScreen(),
                                    ),
                                  );
                                },
                                child: const Icon(
                                  BootstrapIcons.person_circle,
                                  size: 28,
                                  color: AppColors.whiteColor,
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 17),
                          RichText(
                            text: TextSpan(
                              text: 'Hi, ',
                              style: AppTextStyles.whiteTextStyle.copyWith(
                                fontWeight: FontWeight.w700,
                                fontSize: 18,
                              ),
                              children: <TextSpan>[
                                TextSpan(
                                  text: userName,
                                  style: AppTextStyles.yellowTextStyle.copyWith(
                                    fontWeight: FontWeight.w700,
                                    fontSize: 18,
                                  ),
                                ),
                                TextSpan(
                                  text: '!',
                                  style: AppTextStyles.whiteTextStyle.copyWith(
                                    fontWeight: FontWeight.w700,
                                    fontSize: 18,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            'Let\'s evolve together',
                            style: AppTextStyles.whiteTextStyle.copyWith(
                              fontSize: 12,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
          const SizedBox(height: 16),
          CarouselSlider.builder(
            itemCount: cardData.cardData.length,
            itemBuilder: (context, index, realIndex) {
              return WelcomeCard(cardModel: cardData.cardData[index]);
            },
            options: CarouselOptions(
              height: 168,
              viewportFraction: 0.9,
              enlargeCenterPage: true,
              autoPlay: true,
              autoPlayInterval: const Duration(seconds: 3),
              autoPlayAnimationDuration: const Duration(milliseconds: 800),
              autoPlayCurve: Curves.fastOutSlowIn,
              onPageChanged: (index, reason) {
                setState(
                  () {
                    _currentPage = index;
                  },
                );
              },
            ),
          ),
          const SizedBox(height: 16),
          SliderWidget(
            currentPage: _currentPage,
            itemCount: cardData.cardData.length,
          ),
          const SizedBox(height: 16),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: ProgressCard(),
          ),
          // hasOngoingExercises
          //     ? const Padding(
          //         padding: EdgeInsets.symmetric(horizontal: 16.0),
          //         child:
          //             ProgressCard(), // Display progress card if exercises are completed
          //       )
          //     : const Padding(
          //         padding: EdgeInsets.symmetric(horizontal: 16.0),
          //         child:
          //             ExploreCard(), // Display ExploreCard if no exercises are completed
          //       ),
        ],
      );
    });
  }
}