import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/theme/app_theme_extension.dart';

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

  @override
  State<RoleSelectionPage> createState() => _RoleSelectionPageState();
}

class _RoleSelectionPageState extends State<RoleSelectionPage> {
  String? _selectedRole;

  @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(20, (index) => _buildParticle(index)),

            // Main content
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(24.0),
                child: Column(
                  children: [
                    const Spacer(flex: 1),

                    // Wide rectangle with image at top
                    Container(
                      width: double.infinity,
                      height: 84,
                      decoration: const BoxDecoration(
                        color: Color(0xFFF9EEE8),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: SizedBox(
                          width: 140,
                          height: 140,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(16),
                            child: Image.asset(
                              'assets/images/logo.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                      ),
                    ).animate().fadeIn(
                      duration: const Duration(milliseconds: 800),
                      delay: const Duration(milliseconds: 200),
                    ),

                    const SizedBox(height: 24),

                    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(
                        'Assistente de estudo IA',
                        style: Theme.of(context).textTheme.headlineSmall
                            ?.copyWith(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                      ),
                    ).animate().fadeIn(
                      duration: const Duration(milliseconds: 800),
                      delay: const Duration(milliseconds: 300),
                    ),

                    const SizedBox(height: 32),

                    // Title
                    Text(
                          'Quem é você?',
                          style: Theme.of(context).textTheme.headlineMedium
                              ?.copyWith(
                                color: Theme.of(context).colorScheme.onSurface,
                                fontWeight: FontWeight.w600,
                              ),
                        )
                        .animate()
                        .fadeIn(
                          duration: const Duration(milliseconds: 800),
                          delay: const Duration(milliseconds: 600),
                        )
                        .slideY(
                          duration: const Duration(milliseconds: 600),
                          delay: const Duration(milliseconds: 600),
                          begin: -0.3,
                        ),

                    const SizedBox(height: 16),

                    Text(
                          'Selecione o seu papel para continuar',
                          style: Theme.of(context).textTheme.bodyLarge
                              ?.copyWith(
                                color: Theme.of(context).colorScheme.secondary,
                              ),
                        )
                        .animate()
                        .fadeIn(
                          duration: const Duration(milliseconds: 800),
                          delay: const Duration(milliseconds: 800),
                        )
                        .slideY(
                          duration: const Duration(milliseconds: 600),
                          delay: const Duration(milliseconds: 800),
                          begin: -0.2,
                        ),

                    const SizedBox(height: 48),

                    // Role cards
                    Row(
                          children: [
                            Expanded(
                              child: _buildRoleCard(
                                context,
                                'Aluno',
                                Icons.school_outlined,
                                'student',
                                Theme.of(context).colorScheme.primary,
                              ),
                            ),
                            const SizedBox(width: 16),
                            Expanded(
                              child: _buildRoleCard(
                                context,
                                'Professor',
                                Icons.person_outline,
                                'teacher',
                                Theme.of(context).colorScheme.secondary,
                              ),
                            ),
                          ],
                        )
                        .animate()
                        .fadeIn(
                          duration: const Duration(milliseconds: 800),
                          delay: const Duration(milliseconds: 1000),
                        )
                        .slideY(
                          duration: const Duration(milliseconds: 600),
                          delay: const Duration(milliseconds: 1000),
                          begin: 0.3,
                        ),

                    const SizedBox(height: 32),

                    // Continue button
                    SizedBox(
                          width: double.infinity,
                          height: 56,
                          child: ElevatedButton(
                            onPressed: _selectedRole != null
                                ? _handleContinue
                                : null,
                            style: ElevatedButton.styleFrom(
                              backgroundColor: Theme.of(
                                context,
                              ).colorScheme.primary,
                              foregroundColor: Theme.of(
                                context,
                              ).colorScheme.onPrimary,
                              elevation: 4,
                              shadowColor: Theme.of(
                                context,
                              ).colorScheme.primary.withOpacity(0.3),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(16),
                              ),
                            ),
                            child: _selectedRole != null
                                ? const Text(
                                    'Continuar',
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  )
                                : const Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      SizedBox(
                                        width: 20,
                                        height: 20,
                                        child: CircularProgressIndicator(
                                          strokeWidth: 2,
                                          valueColor:
                                              AlwaysStoppedAnimation<Color>(
                                                Colors.white,
                                              ),
                                        ),
                                      ),
                                    ],
                                  ),
                          ),
                        )
                        .animate()
                        .fadeIn(
                          duration: const Duration(milliseconds: 800),
                          delay: const Duration(milliseconds: 1200),
                        )
                        .slideY(
                          duration: const Duration(milliseconds: 600),
                          delay: const Duration(milliseconds: 1200),
                          begin: 0.3,
                        ),

                    const SizedBox(height: 32),

                    const Spacer(flex: 1),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _handleGoToLogin() {
    if (_selectedRole != null) {
      context.go('/login?role=$_selectedRole');
    }
  }

  Widget _buildRoleCard(
    BuildContext context,
    String title,
    IconData icon,
    String role,
    Color gradientColor,
  ) {
    final isSelected = _selectedRole == role;

    return GestureDetector(
      onTap: () => setState(() => _selectedRole = role),
      child:
          Container(
                height: 160,
                decoration: BoxDecoration(
                  gradient: isSelected
                      ? LinearGradient(
                          colors: [
                            gradientColor,
                            gradientColor.withOpacity(0.8),
                          ],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        )
                      : null,
                  color: isSelected
                      ? null
                      : Theme.of(context).colorScheme.surface,
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(
                    color: isSelected
                        ? gradientColor
                        : Theme.of(
                            context,
                          ).colorScheme.primary.withOpacity(0.2),
                    width: isSelected ? 2 : 1,
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: isSelected
                          ? gradientColor.withOpacity(0.3)
                          : Colors.black.withOpacity(0.1),
                      blurRadius: isSelected ? 15 : 8,
                      offset: const Offset(0, 4),
                    ),
                  ],
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      icon,
                      size: 48,
                      color: isSelected
                          ? Colors.white
                          : Theme.of(context).colorScheme.primary,
                    ),
                    const SizedBox(height: 12),
                    Text(
                      title,
                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
                        color: isSelected
                            ? Colors.white
                            : Theme.of(context).colorScheme.onSurface,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ],
                ),
              )
              .animate()
              .scale(
                duration: const Duration(milliseconds: 200),
                begin: const Offset(1.0, 1.0),
                end: const Offset(1.05, 1.05),
              )
              .then()
              .scale(
                duration: const Duration(milliseconds: 200),
                begin: const Offset(1.05, 1.05),
                end: const Offset(1.0, 1.0),
              ),
    );
  }

  Widget _buildParticle(int index) {
    final random = index * 137.5;
    return Positioned(
      top: (random % 300) + 50,
      left: (random % 200) + 50,
      child:
          Container(
                width: 4,
                height: 4,
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.primary.withOpacity(0.3),
                  shape: BoxShape.circle,
                ),
              )
              .animate()
              .moveY(
                duration: Duration(milliseconds: 3000 + (index * 200)),
                begin: 0.0,
                end: -200.0,
                curve: Curves.easeInOut,
              )
              .fadeIn(
                duration: const Duration(milliseconds: 1000),
                delay: Duration(milliseconds: index * 100),
              )
              .then()
              .fadeOut(duration: const Duration(milliseconds: 1000)),
    );
  }

  void _handleContinue() {
    if (_selectedRole != null) {
      // Store the selected role and navigate to signup
      // TODO: Store role in shared preferences or state management
      context.go('/signup?role=$_selectedRole');
    }
  }
}
