import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/services/auth_service.dart';
import '../../../../core/services/session_service.dart';
import '../../../../core/theme/app_theme_extension.dart';
import '../../../../l10n/app_localizations.dart';

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

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    _checkAuthenticationAndNavigate();
  }

  void _checkAuthenticationAndNavigate() async {
    try {
      print('DEBUG: Checking authentication state...');

      // Check if user is currently authenticated FIRST (before any delay)
      final currentUser = AuthService.currentUser;

      if (currentUser != null) {
        print('DEBUG: User already authenticated: ${currentUser.email}');

        // Check if remember me is enabled
        final sessionData = await SessionService.getCurrentSession();
        final rememberMe = sessionData['rememberMe'] ?? false;

        print('DEBUG: Remember me status: $rememberMe');

        // If user is authenticated but remember me is false, sign them out
        if (!rememberMe) {
          print('DEBUG: Remember me is false, signing out user');
          await AuthService.signOut();

          // Show splash for full 3 seconds
          await Future.delayed(const Duration(seconds: 3));

          if (mounted) {
            context.go('/role-selection');
          }
          return;
        }

        // Reload user data to get latest information from Firebase
        await currentUser.reload();

        // Get user role from Firestore
        final userRole = await AuthService.getUserRole(currentUser.uid);
        print('DEBUG: User role: $userRole');

        // Update session with current user if needed
        await SessionService.updateSessionWithCurrentUser();

        // Minimal splash delay for authenticated users (just for smooth transition)
        await Future.delayed(const Duration(milliseconds: 1500));

        // Navigate to appropriate dashboard based on role
        if (mounted) {
          if (userRole == 'teacher') {
            print('DEBUG: Navigating to teacher dashboard');
            context.go('/teacher-dashboard');
          } else {
            print('DEBUG: Navigating to student dashboard');
            context.go('/student-dashboard');
          }
        }
        return;
      }

      // Check if user should be auto-logged in
      final sessionData = await SessionService.shouldAutoLogin();

      if (sessionData['shouldAutoLogin'] == true) {
        print('DEBUG: Auto-login available for: ${sessionData['email']}');

        // Show splash for full 3 seconds for unauthenticated users with saved session
        await Future.delayed(const Duration(seconds: 3));

        if (mounted) {
          // Navigate to login page with pre-filled data
          print('DEBUG: Navigating to login for auto-login');
          context.go('/login');
        }
      } else {
        print('DEBUG: No auto-login available, going to role selection');

        // Show splash for full 3 seconds for new users
        await Future.delayed(const Duration(seconds: 3));

        if (mounted) {
          context.go('/role-selection');
        }
      }
    } catch (e) {
      print('DEBUG: Error in authentication check: $e');

      // Fallback to role selection
      if (mounted) {
        context.go('/role-selection');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: Theme.of(context).brightness == Brightness.dark
                ? AppThemeExtras.of(context).authBackgroundGradient
                : [
                    Theme.of(context).colorScheme.background,
                    Theme.of(context).colorScheme.primary.withOpacity(0.1),
                    Theme.of(context).colorScheme.secondary.withOpacity(0.05),
                    Theme.of(context).colorScheme.background,
                  ],
          ),
        ),
        child: Stack(
          children: [
            // Animated background particles
            ...List.generate(25, (index) => _buildParticle(index)),

            // Main content
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Modern logo with gradient animation
                  Stack(
                    alignment: Alignment.center,
                    children: [
                      // Outer ring animation
                      Container(
                            width: 160,
                            height: 160,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              border: Border.all(
                                color: Theme.of(
                                  context,
                                ).colorScheme.primary.withOpacity(0.2),
                                width: 2,
                              ),
                            ),
                          )
                          .animate()
                          .scale(
                            duration: const Duration(milliseconds: 2000),
                            curve: Curves.easeInOut,
                            begin: const Offset(0.8, 0.8),
                            end: const Offset(1.2, 1.2),
                          )
                          .then()
                          .scale(
                            duration: const Duration(milliseconds: 2000),
                            curve: Curves.easeInOut,
                            begin: const Offset(1.2, 1.2),
                            end: const Offset(0.8, 0.8),
                          ),

                      // Middle ring animation
                      Container(
                            width: 120,
                            height: 120,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              border: Border.all(
                                color: Theme.of(
                                  context,
                                ).colorScheme.secondary.withOpacity(0.3),
                                width: 3,
                              ),
                            ),
                          )
                          .animate()
                          .scale(
                            duration: const Duration(milliseconds: 1500),
                            curve: Curves.easeInOut,
                            begin: const Offset(1.0, 1.0),
                            end: const Offset(1.1, 1.1),
                          )
                          .then()
                          .scale(
                            duration: const Duration(milliseconds: 1500),
                            curve: Curves.easeInOut,
                            begin: const Offset(1.1, 1.1),
                            end: const Offset(1.0, 1.0),
                          ),

                      // Main logo container
                      Container(
                            width: 80,
                            height: 80,
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Theme.of(context).colorScheme.primary,
                                  Theme.of(context).colorScheme.secondary,
                                ],
                                begin: Alignment.topLeft,
                                end: Alignment.bottomRight,
                              ),
                              borderRadius: BorderRadius.circular(20),
                              boxShadow: [
                                BoxShadow(
                                  color: Theme.of(
                                    context,
                                  ).colorScheme.primary.withOpacity(0.3),
                                  blurRadius: 20,
                                  offset: const Offset(0, 8),
                                ),
                                BoxShadow(
                                  color: Theme.of(
                                    context,
                                  ).colorScheme.secondary.withOpacity(0.2),
                                  blurRadius: 15,
                                  offset: const Offset(0, 4),
                                ),
                              ],
                            ),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: Image.asset(
                                'assets/images/epvc.png',
                                fit: BoxFit.cover,
                              ),
                            ),
                          )
                          .animate()
                          .scale(
                            duration: const Duration(milliseconds: 800),
                            curve: Curves.elasticOut,
                          )
                          .then()
                          .shimmer(
                            duration: const Duration(milliseconds: 2500),
                            color: Colors.white.withOpacity(0.4),
                          )
                          .then()
                          .rotate(
                            duration: const Duration(milliseconds: 1000),
                            curve: Curves.easeInOut,
                            begin: 0.0,
                            end: 0.05,
                          )
                          .then()
                          .rotate(
                            duration: const Duration(milliseconds: 1000),
                            curve: Curves.easeInOut,
                            begin: 0.05,
                            end: 0.0,
                          ),
                    ],
                  ),

                  const SizedBox(height: 40),

                  // School name with gradient
                  ShaderMask(
                        shaderCallback: (bounds) => LinearGradient(
                          colors: [
                            Theme.of(context).colorScheme.primary,
                            Theme.of(context).colorScheme.secondary,
                          ],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ).createShader(bounds),
                        child: Text(
                          AppLocalizations.of(context)!.appTitle,
                          style: Theme.of(context).textTheme.headlineMedium
                              ?.copyWith(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                letterSpacing: 1.2,
                              ),
                        ),
                      )
                      .animate()
                      .fadeIn(
                        duration: const Duration(milliseconds: 1000),
                        delay: const Duration(milliseconds: 500),
                      )
                      .slideY(
                        duration: const Duration(milliseconds: 800),
                        delay: const Duration(milliseconds: 500),
                        begin: 0.3,
                      ),

                  const SizedBox(height: 12),

                  // School name subtitle
                  ShaderMask(
                        shaderCallback: (bounds) => LinearGradient(
                          colors: [
                            Theme.of(
                              context,
                            ).colorScheme.secondary.withOpacity(0.8),
                            Theme.of(
                              context,
                            ).colorScheme.primary.withOpacity(0.8),
                          ],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ).createShader(bounds),
                        child: Text(
                          AppLocalizations.of(context)!.schoolName,
                          style: Theme.of(context).textTheme.bodyMedium
                              ?.copyWith(
                                color: Colors.white,
                                fontWeight: FontWeight.w500,
                              ),
                        ),
                      )
                      .animate()
                      .fadeIn(
                        duration: const Duration(milliseconds: 1000),
                        delay: const Duration(milliseconds: 700),
                      )
                      .slideY(
                        duration: const Duration(milliseconds: 800),
                        delay: const Duration(milliseconds: 700),
                        begin: 0.2,
                      ),

                  const SizedBox(height: 40),

                  // Modern loading indicator
                  Column(
                    children: [
                      // Loading dots
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          _buildLoadingDot(0),
                          const SizedBox(width: 8),
                          _buildLoadingDot(1),
                          const SizedBox(width: 8),
                          _buildLoadingDot(2),
                        ],
                      ),

                      const SizedBox(height: 16),

                      // Loading text
                      Text(
                            'A preparar a sua experiência...',
                            style: Theme.of(context).textTheme.bodySmall
                                ?.copyWith(
                                  color: Theme.of(
                                    context,
                                  ).colorScheme.secondary,
                                  fontWeight: FontWeight.w500,
                                ),
                          )
                          .animate()
                          .fadeIn(
                            duration: const Duration(milliseconds: 800),
                            delay: const Duration(milliseconds: 1200),
                          )
                          .then()
                          .shimmer(
                            duration: const Duration(milliseconds: 2000),
                            color: Theme.of(
                              context,
                            ).colorScheme.primary.withOpacity(0.3),
                          ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLoadingDot(int index) {
    return Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Theme.of(context).colorScheme.primary,
                Theme.of(context).colorScheme.secondary,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            shape: BoxShape.circle,
          ),
        )
        .animate()
        .scale(
          duration: const Duration(milliseconds: 600),
          delay: Duration(milliseconds: index * 200),
          curve: Curves.elasticOut,
          begin: const Offset(0.0, 0.0),
          end: const Offset(1.0, 1.0),
        )
        .then()
        .scale(
          duration: const Duration(milliseconds: 400),
          delay: Duration(milliseconds: 800 + index * 200),
          begin: const Offset(1.0, 1.0),
          end: const Offset(0.8, 0.8),
        )
        .then()
        .scale(
          duration: const Duration(milliseconds: 400),
          begin: const Offset(0.8, 0.8),
          end: const Offset(1.0, 1.0),
        );
  }

  Widget _buildParticle(int index) {
    final random = index * 137.5;
    return Positioned(
      top: (random % 400) + 50,
      left: (random % 300) + 50,
      child:
          Container(
                width: 2,
                height: 2,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Theme.of(context).colorScheme.primary.withOpacity(0.3),
                      Theme.of(context).colorScheme.secondary.withOpacity(0.2),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  shape: BoxShape.circle,
                ),
              )
              .animate()
              .moveY(
                duration: Duration(milliseconds: 4000 + (index * 200)),
                begin: 0.0,
                end: -200.0,
                curve: Curves.easeInOut,
              )
              .fadeIn(
                duration: const Duration(milliseconds: 1000),
                delay: Duration(milliseconds: index * 150),
              )
              .then()
              .fadeOut(duration: const Duration(milliseconds: 1000)),
    );
  }
}
