import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart'; import 'package:go_router/go_router.dart'; import '../../../../core/theme/app_colors.dart'; import '../../../../l10n/app_localizations.dart'; class RoleSelectionPage extends StatefulWidget { const RoleSelectionPage({super.key}); @override State createState() => _RoleSelectionPageState(); } class _RoleSelectionPageState extends State { String? _selectedRole; @override Widget build(BuildContext context) { return Scaffold( body: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ AppColors.background, AppColors.primaryBlue.withOpacity(0.05), AppColors.gradientStart.withOpacity(0.1), ], ), ), 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 SizedBox(height: 60), // Logo and title Center( child: Column( children: [ Container( width: 100, height: 100, decoration: BoxDecoration( gradient: const LinearGradient( colors: [ AppColors.gradientStart, AppColors.gradientEnd, ], begin: Alignment.topLeft, end: Alignment.bottomRight, ), borderRadius: BorderRadius.circular(25), boxShadow: [ BoxShadow( color: AppColors.primaryBlue.withOpacity( 0.3, ), blurRadius: 25, offset: const Offset(0, 10), ), ], ), child: const Icon( Icons.school, size: 50, color: Colors.white, ), ) .animate() .scale( duration: const Duration(milliseconds: 800), curve: Curves.elasticOut, ) .then() .shimmer( duration: const Duration(milliseconds: 2000), color: Colors.white.withOpacity(0.4), ), const SizedBox(height: 32), Text( AppLocalizations.of(context)!.appTitle, style: Theme.of(context).textTheme.headlineLarge ?.copyWith( color: AppColors.textPrimary, fontWeight: FontWeight.bold, ), ) .animate() .fadeIn( duration: const Duration(milliseconds: 800), delay: const Duration(milliseconds: 200), ) .slideY( duration: const Duration(milliseconds: 600), delay: const Duration(milliseconds: 200), begin: -0.3, ), const SizedBox(height: 12), ShaderMask( shaderCallback: (bounds) => const LinearGradient( colors: [ AppColors.primaryTeal, AppColors.primaryOrange, ], 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.w600, ), ), ) .animate() .fadeIn( duration: const Duration(milliseconds: 800), delay: const Duration(milliseconds: 400), ) .slideY( duration: const Duration(milliseconds: 600), delay: const Duration(milliseconds: 400), begin: -0.2, ), ], ), ), const Spacer(), // Role selection title Text( 'Quem é você?', style: Theme.of(context).textTheme.headlineMedium ?.copyWith( color: AppColors.textPrimary, 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: AppColors.primaryOrange), ) .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', AppColors.gradientStart, ), ), const SizedBox(width: 16), Expanded( child: _buildRoleCard( context, 'Professor', Icons.person_outline, 'teacher', AppColors.gradientEnd, ), ), ], ) .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: AppColors.primaryBlue, foregroundColor: Colors.white, elevation: 4, shadowColor: AppColors.primaryBlue.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( 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), ], ), ), ), ], ), ), ); } 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 : Colors.white, borderRadius: BorderRadius.circular(20), border: Border.all( color: isSelected ? gradientColor : AppColors.primaryBlue.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 : AppColors.primaryBlue, ), const SizedBox(height: 12), Text( title, style: Theme.of(context).textTheme.titleLarge?.copyWith( color: isSelected ? Colors.white : AppColors.textPrimary, 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: AppColors.gradientStart.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'); } } }