import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:go_router/go_router.dart';
import '../../../../l10n/app_localizations.dart';
import '../../../../core/services/auth_service.dart';
import '../../../../shared/presentation/widgets/custom_notification.dart';

class SignupPage extends StatefulWidget {
  final String? selectedRole;

  const SignupPage({super.key, this.selectedRole});

  @override
  State<SignupPage> createState() => _SignupPageState();
}

class _SignupPageState extends State<SignupPage> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;
  bool _obscurePassword = true;
  late String _selectedRole;

  @override
  void initState() {
    super.initState();
    // Usar role passado da tela anterior ou default 'student'
    _selectedRole = widget.selectedRole ?? 'student';
  }

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  Future<void> _handleSignup() async {
    if (!_formKey.currentState!.validate()) return;

    setState(() {
      _isLoading = true;
    });

    try {
      // Get name, email and password from controllers
      final name = _nameController.text.trim();
      final email = _emailController.text.trim();
      final password = _passwordController.text.trim();

      print('DEBUG: Iniciando processo de signup para: $email');
      print('DEBUG: Nome: $name, Papel: $_selectedRole');

      // Attempt signup with Firebase
      await AuthService.signUpWithEmailAndPassword(
        email: email,
        password: password,
        displayName: name,
        role: _selectedRole,
      );

      print('DEBUG: Signup Firebase bem-sucedido, navegando para dashboard');

      if (mounted) {
        setState(() {
          _isLoading = false;
        });

        // Show success message
        NotificationHelper.showSuccess(
          context,
          message: 'Conta criada com sucesso!',
        );

        // Navigate to appropriate dashboard based on role
        if (_selectedRole == 'teacher') {
          context.go('/teacher-dashboard');
        } else {
          context.go('/student-dashboard');
        }
      }
    } catch (e) {
      print('DEBUG: Erro no signup: $e');

      if (mounted) {
        setState(() {
          _isLoading = false;
        });

        // Show error message
        NotificationHelper.showError(
          context,
          message: e.toString().replaceAll('Exception: ', ''),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFF8F9FA),
              Color.fromRGBO(130, 201, 189, 0.1),
              Color.fromRGBO(246, 141, 45, 0.05),
              Color(0xFFF8F9FA),
            ],
          ),
        ),
        child: SafeArea(
          child: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24.0),
              child: Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const SizedBox(height: 60),

                    // Logo/Title
                    Container(
                      padding: const EdgeInsets.all(20.0),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.9),
                        borderRadius: BorderRadius.circular(16.0),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 10.0,
                            offset: const Offset(0, 4),
                          ),
                        ],
                      ),
                      child: Column(
                        children: [
                          Text(
                            'EPVC',
                            style: TextStyle(
                              fontSize: 32,
                              fontWeight: FontWeight.bold,
                              foreground: Paint()
                                ..shader = LinearGradient(
                                  colors: [
                                    const Color(0xFF82C9BD),
                                    const Color(0xFFF68D2D),
                                  ],
                                ).createShader(Rect.fromLTWH(0, 0, 200, 20)),
                            ),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            'Escola Profissional de Vila do Conde',
                            style: TextStyle(
                              fontSize: 14,
                              color: const Color(0xFF2D3748),
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),
                    ).animate().fadeIn(
                      duration: const Duration(milliseconds: 800),
                    ),

                    const SizedBox(height: 40),

                    // Signup form
                    Container(
                      padding: const EdgeInsets.all(24.0),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.9),
                        borderRadius: BorderRadius.circular(16.0),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 10.0,
                            offset: const Offset(0, 4),
                          ),
                        ],
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Text(
                            'Criar Conta',
                            style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                              color: Color(0xFF2D3748),
                            ),
                          ),
                          const SizedBox(height: 24),

                          // Name field
                          TextFormField(
                            controller: _nameController,
                            keyboardType: TextInputType.name,
                            style: const TextStyle(color: Color(0xFF2D3748)),
                            decoration: InputDecoration(
                              labelText: 'Nome Completo',
                              labelStyle: const TextStyle(
                                color: Color(0xFF2D3748),
                              ),
                              hintStyle: const TextStyle(
                                color: Color(0xFF718096),
                              ),
                              prefixIcon: const Icon(
                                Icons.person,
                                color: Color(0xFF82C9BD),
                              ),
                              border: InputBorder.none,
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8.0),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE2E8F0),
                                ),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8.0),
                                borderSide: const BorderSide(
                                  color: Color(0xFF82C9BD),
                                ),
                              ),
                              filled: true,
                              fillColor: const Color(0xFFF8F9FA),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Nome é obrigatório';
                              }
                              if (value.length < 2) {
                                return 'Nome muito curto';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 16),

                          // Email field
                          TextFormField(
                            controller: _emailController,
                            keyboardType: TextInputType.emailAddress,
                            style: const TextStyle(color: Color(0xFF2D3748)),
                            decoration: InputDecoration(
                              labelText: 'Email',
                              labelStyle: const TextStyle(
                                color: Color(0xFF2D3748),
                              ),
                              hintStyle: const TextStyle(
                                color: Color(0xFF718096),
                              ),
                              prefixIcon: const Icon(
                                Icons.email,
                                color: Color(0xFF82C9BD),
                              ),
                              border: InputBorder.none,
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8.0),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE2E8F0),
                                ),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8.0),
                                borderSide: const BorderSide(
                                  color: Color(0xFF82C9BD),
                                ),
                              ),
                              filled: true,
                              fillColor: const Color(0xFFF8F9FA),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Email é obrigatório';
                              }
                              if (!value.contains('@')) {
                                return 'Email inválido';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 16),

                          // Password field
                          TextFormField(
                            controller: _passwordController,
                            obscureText: _obscurePassword,
                            style: const TextStyle(color: Color(0xFF2D3748)),
                            decoration: InputDecoration(
                              labelText: 'Palavra-passe',
                              labelStyle: const TextStyle(
                                color: Color(0xFF2D3748),
                              ),
                              hintStyle: const TextStyle(
                                color: Color(0xFF718096),
                              ),
                              prefixIcon: const Icon(
                                Icons.lock,
                                color: Color(0xFF82C9BD),
                              ),
                              suffixIcon: IconButton(
                                icon: Icon(
                                  _obscurePassword
                                      ? Icons.visibility
                                      : Icons.visibility_off,
                                  color: const Color(0xFF82C9BD),
                                ),
                                onPressed: () {
                                  setState(() {
                                    _obscurePassword = !_obscurePassword;
                                  });
                                },
                              ),
                              border: InputBorder.none,
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8.0),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE2E8F0),
                                ),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8.0),
                                borderSide: const BorderSide(
                                  color: Color(0xFF82C9BD),
                                ),
                              ),
                              filled: true,
                              fillColor: const Color(0xFFF8F9FA),
                            ),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return 'Palavra-passe é obrigatória';
                              }
                              if (value.length < 6) {
                                return 'Palavra-passe muito curta';
                              }
                              return null;
                            },
                          ),
                          const SizedBox(height: 24),

                          // Signup button
                          SizedBox(
                            height: 50,
                            child: ElevatedButton(
                              onPressed: _isLoading ? null : _handleSignup,
                              style: ElevatedButton.styleFrom(
                                backgroundColor: const Color(0xFF82C9BD),
                                foregroundColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
                                elevation: 2,
                              ),
                              child: _isLoading
                                  ? const SizedBox(
                                      width: 20,
                                      height: 20,
                                      child: CircularProgressIndicator(
                                        strokeWidth: 2,
                                        valueColor:
                                            AlwaysStoppedAnimation<Color>(
                                              Colors.white,
                                            ),
                                      ),
                                    )
                                  : Text(
                                      'Criar Conta',
                                      style: const TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                            ),
                          ),
                          const SizedBox(height: 16),

                          // Login link
                          GestureDetector(
                            onTap: () {
                              context.go('/login?role=$_selectedRole');
                            },
                            child: Text(
                              'Já tem conta? Entrar aqui',
                              style: const TextStyle(
                                color: Color(0xFF82C9BD),
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ).animate().fadeIn(
                      duration: const Duration(milliseconds: 1000),
                    ),

                    const SizedBox(height: 40),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}