import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../../extension/screenSize.dart';
import '../../gen/assets.gen.dart';
import '../../res/colors.dart';
import '../../widgets/language_selection_dialog.dart';
import 'login_page.dart';

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

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;
  final PageController _pageController = PageController();

  String _currentLanguage = '🇺🇲  English';
  String _currentFlag = 'assets/icons/usa circle.svg';
  final GlobalKey _languageKey = GlobalKey();

  final List<String> imageAssets = [
    Assets.images.ounboarding1.path,
    Assets.images.frame.path,
    Assets.images.onboarding3.path,
  ];

  final List<String> slides = [
    Assets.icons.slides1.path,
    Assets.icons.slide2.path,
    Assets.icons.slide3.path,
  ];

  void _next() {
    if (currentIndex < imageAssets.length - 1) {
      _pageController.nextPage(
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    } else {
      _markOnboardingComplete();
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => LoginPage()),
      );
    }
  }

  Future<void> _markOnboardingComplete() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('hasSeenOnboarding', true);
  }

  Future<void> _resetOnboarding() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('hasSeenOnboarding');
  }

  void _back() {
    if (currentIndex > 0) {
      _pageController.previousPage(
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final width = context.screenWidth;
    final height = context.screenHeight;

    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.fromLTRB(
              width / 15,
              height / 20,
              width / 15,
              0,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(width: 50),
                GestureDetector(
                  key: _languageKey,
                  onTap: () {
                    showLanguageSelectionOverlay(context, _currentLanguage, (
                      language,
                      flag,
                    ) {
                      setState(() {
                        _currentLanguage = language;
                        _currentFlag = flag;
                      });
                    }, _languageKey);
                  },
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      AnimatedSwitcher(
                        duration: const Duration(milliseconds: 300),
                        child: ClipRRect(
                          key: ValueKey(_currentFlag),
                          borderRadius: BorderRadius.circular(4),
                          child:
                              _currentFlag == 'placeholder'
                                  ? Container(
                                    width: 24,
                                    height: 18,
                                    decoration: BoxDecoration(
                                      color: AppColors.primary.withOpacity(0.1),
                                      borderRadius: BorderRadius.circular(4),
                                    ),
                                    child: Icon(
                                      Icons.flag,
                                      color: AppColors.primary,
                                      size: 12,
                                    ),
                                  )
                                  : _currentFlag.endsWith('.svg')
                                  ? SvgPicture.asset(
                                    _currentFlag,
                                    width: 24,
                                    height: 18,
                                  )
                                  : Image.asset(
                                    _currentFlag,
                                    width: 24,
                                    height: 18,
                                    fit: BoxFit.cover,
                                    errorBuilder: (context, error, stackTrace) {
                                      return Container(
                                        width: 24,
                                        height: 18,
                                        decoration: BoxDecoration(
                                          color: AppColors.greyBorder
                                              .withOpacity(0.2),
                                          borderRadius: BorderRadius.circular(
                                            4,
                                          ),
                                        ),
                                        child: Icon(
                                          Icons.flag,
                                          color: AppColors.textSecondary,
                                          size: 12,
                                        ),
                                      );
                                    },
                                  ),
                        ),
                      ),
                      const SizedBox(width: 8),
                      AnimatedSwitcher(
                        duration: const Duration(milliseconds: 300),
                        child: Text(
                          _currentLanguage,
                          key: ValueKey(_currentLanguage),
                          style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                            color: AppColors.textPrimary,
                          ),
                        ),
                      ),
                      const SizedBox(width: 8),
                      SvgPicture.asset(
                        Assets.icons.arrowRight.path,
                        color: AppColors.textPrimary,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              itemCount: imageAssets.length,
              onPageChanged: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.fromLTRB(
                    width / 15,
                    height /
                        60,
                    width / 15,
                    height / 30,
                  ),
                  child: SvgPicture.asset(
                    imageAssets[index],
                    key: ValueKey(imageAssets[index]),
                    height: height / 2.5,
                    width: width,
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(width / 15, 10, width / 15, 5),
            child: Row(
              children: [
                Text(
                  "Proxibuy Geofencing marketing",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                  textDirection: TextDirection.ltr,
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(width / 15, 0, width / 15, width / 30),
            child: Text(
              '"Join the app to discover exclusive discounts and special offers in specific areas around you for a smarter shopping experience!"',
              style: TextStyle(
                fontWeight: FontWeight.w500,
                color: LightAppColors.hint,
                fontSize: 15,
              ),
            ),
          ),
          SizedBox(height: height / 30),
          Padding(
            padding: EdgeInsets.fromLTRB(
              width / 15,
              0,
              width / 15,
              height / 10,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                AnimatedSwitcher(
                  duration: Duration(milliseconds: 200),
                  child: SvgPicture.asset(
                    slides[currentIndex],
                    key: ValueKey(slides[currentIndex]),
                  ),
                ),
                Row(
                  children: [
                    if (currentIndex > 0)
                      GestureDetector(
                        onTap: _back,
                        child: SvgPicture.asset(
                          Assets.icons.arrowLeft.path,
                          color: AppColors.isDarkMode ? Colors.grey : null,
                        ),
                      ),
                    const SizedBox(width: 8),
                    GestureDetector(
                      onTap: _next,
                      child: SvgPicture.asset(
                        Assets.icons.next.path,
                        width: width / 5.5,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

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