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 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: 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( top: false, child: Padding( padding: const EdgeInsets.only( left: 24.0, right: 24.0, bottom: 28.0, top: 52.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( 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'); } } }