import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'dart:math' as math; // Pour la rotation du chevron

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

  @override
  State<ParentRegisterStep1Screen> createState() => _ParentRegisterStep1ScreenState();
}

class _ParentRegisterStep1ScreenState extends State<ParentRegisterStep1Screen> {
  final _formKey = GlobalKey<FormState>();

  // Contrôleurs pour les champs
  final _lastNameController = TextEditingController();
  final _firstNameController = TextEditingController();
  final _phoneController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();
  final _addressController = TextEditingController();
  final _postalCodeController = TextEditingController();
  final _cityController = TextEditingController();

  @override
  void dispose() {
    _lastNameController.dispose();
    _firstNameController.dispose();
    _phoneController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    _confirmPasswordController.dispose();
    _addressController.dispose();
    _postalCodeController.dispose();
    _cityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Stack(
        children: [
          // Fond papier
          Positioned.fill(
            child: Image.asset(
              'assets/images/paper2.png',
              fit: BoxFit.cover,
              repeat: ImageRepeat.repeat,
            ),
          ),

          // Contenu centré
          Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                   // Indicateur d'étape (à rendre dynamique)
                  Text(
                    'Étape 1/X',
                    style: GoogleFonts.merienda(fontSize: 16, color: Colors.black54),
                  ),
                  const SizedBox(height: 10),
                  // Texte d'instruction
                  Text(
                    'Merci de renseigner les informations du premier parent :',
                    style: GoogleFonts.merienda(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 30),

                  // Carte jaune contenant le formulaire
                  Container(
                    width: screenSize.width * 0.6,
                    padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/images/card_yellow_h.png'),
                        fit: BoxFit.fill,
                      ),
                    ),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Row(
                            children: [
                              Expanded(child: _buildTextField(_lastNameController, 'Nom', hintText: 'Votre nom de famille')),
                              const SizedBox(width: 20),
                              Expanded(child: _buildTextField(_firstNameController, 'Prénom', hintText: 'Votre prénom')),
                            ],
                          ),
                          const SizedBox(height: 20),
                          Row(
                            children: [
                              Expanded(child: _buildTextField(_phoneController, 'Téléphone', keyboardType: TextInputType.phone, hintText: 'Votre numéro de téléphone')),
                              const SizedBox(width: 20),
                              Expanded(child: _buildTextField(_emailController, 'Email', keyboardType: TextInputType.emailAddress, hintText: 'Votre adresse e-mail')),
                            ],
                          ),
                          const SizedBox(height: 20),
                          Row(
                            children: [
                              Expanded(child: _buildTextField(_passwordController, 'Mot de passe', obscureText: true, hintText: 'Créez votre mot de passe')),
                              const SizedBox(width: 20),
                              Expanded(child: _buildTextField(_confirmPasswordController, 'Confirmation', obscureText: true, hintText: 'Confirmez le mot de passe')),
                            ],
                          ),
                          const SizedBox(height: 20),
                          _buildTextField(_addressController, 'Adresse (Rue)', hintText: 'Numéro et nom de votre rue'),
                          const SizedBox(height: 20),
                          Row(
                            children: [
                              Expanded(flex: 2, child: _buildTextField(_postalCodeController, 'Code Postal', keyboardType: TextInputType.number, hintText: 'Code postal')),
                              const SizedBox(width: 20),
                              Expanded(flex: 3, child: _buildTextField(_cityController, 'Ville', hintText: 'Votre ville')),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Chevron de navigation gauche (Retour)
          Positioned(
            top: screenSize.height / 2 - 20, // Centré verticalement
            left: 40,
            child: IconButton(
              icon: Transform(
                alignment: Alignment.center,
                transform: Matrix4.rotationY(math.pi), // Inverse horizontalement
                child: Image.asset('assets/images/chevron_right.png', height: 40),
              ),
              onPressed: () => Navigator.pop(context), // Retour à l'écran de choix
              tooltip: 'Retour',
            ),
          ),

          // Chevron de navigation droit (Suivant)
          Positioned(
            top: screenSize.height / 2 - 20, // Centré verticalement
            right: 40,
            child: IconButton(
              icon: Image.asset('assets/images/chevron_right.png', height: 40),
              onPressed: () {
                if (_formKey.currentState?.validate() ?? false) {
                  // TODO: Sauvegarder les données du parent 1
                  Navigator.pushNamed(context, '/parent-register/step2'); // Naviguer vers l'étape 2
                }
              },
              tooltip: 'Suivant',
            ),
          ),
        ],
      ),
    );
  }

  // Widget pour construire les champs de texte avec le fond personnalisé
  Widget _buildTextField(
    TextEditingController controller,
    String label, {
    TextInputType? keyboardType,
    bool obscureText = false,
    String? hintText,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '$label :',
          style: GoogleFonts.merienda(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.black87),
        ),
        const SizedBox(height: 5),
        Container(
          height: 50,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/input_field_bg.png'),
              fit: BoxFit.fill,
            ),
          ),
          child: TextFormField(
            controller: controller,
            keyboardType: keyboardType,
            obscureText: obscureText,
            style: GoogleFonts.merienda(fontSize: 16, color: Colors.black87),
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 14),
              hintText: hintText ?? label,
              hintStyle: GoogleFonts.merienda(fontSize: 16, color: Colors.black38),
            ),
            validator: (value) {
              // Validation désactivée
              return null;
              /*
              if (value == null || value.isEmpty) {
                return 'Ce champ est obligatoire';
              }
              // TODO: Ajouter des validations spécifiques (email, téléphone, mot de passe)
              if (label == 'Confirmation' && value != _passwordController.text) {
                return 'Les mots de passe ne correspondent pas';
              }
              return null;
              */
            },
          ),
        ),
      ],
    );
  }
}