import 'package:flutter/material.dart';
import 'package:playmaker/classe/theme.dart'; // 👇 IMPORT DO TEMA
import '../controllers/register_controller.dart'; 
import '../utils/size_extension.dart'; // 👇 O NOSSO SUPERPODER!

class RegisterHeader extends StatelessWidget {
  const RegisterHeader({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(Icons.person_add_outlined, size: 100 * context.sf, color: AppTheme.primaryRed), // 👇 Cor do tema
        SizedBox(height: 10 * context.sf),
        Text(
          'Nova Conta',
          style: TextStyle(
            fontSize: 36 * context.sf, 
            fontWeight: FontWeight.bold, 
            color: Theme.of(context).colorScheme.onSurface, // 👇 Adaptável ao Modo Escuro
          ),
        ),
        SizedBox(height: 5 * context.sf),
        Text(
          'Cria o teu perfil no BasketTrack',
          style: TextStyle(fontSize: 16 * context.sf, color: Colors.grey, fontWeight: FontWeight.w500),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

class RegisterFormFields extends StatefulWidget {
  final RegisterController controller;
  const RegisterFormFields({super.key, required this.controller});

  @override
  State<RegisterFormFields> createState() => _RegisterFormFieldsState();
}

class _RegisterFormFieldsState extends State<RegisterFormFields> {
  bool _obscurePassword = true;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: widget.controller.formKey, 
      child: Column(
        children: [
          TextFormField(
            controller: widget.controller.nameController,
            style: TextStyle(fontSize: 15 * context.sf, color: Theme.of(context).colorScheme.onSurface),
            decoration: InputDecoration(
              labelText: 'Nome Completo',
              labelStyle: TextStyle(fontSize: 15 * context.sf),
              prefixIcon: Icon(Icons.person_outline, size: 22 * context.sf, color: AppTheme.primaryRed), // 👇 Cor do tema
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(12 * context.sf)),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12 * context.sf),
                borderSide: BorderSide(color: AppTheme.primaryRed, width: 2), // 👇 Destaque ao focar
              ),
              contentPadding: EdgeInsets.symmetric(vertical: 18 * context.sf, horizontal: 16 * context.sf),
            ),
          ),
          SizedBox(height: 20 * context.sf),

          TextFormField(
            controller: widget.controller.emailController,
            validator: widget.controller.validateEmail, 
            style: TextStyle(fontSize: 15 * context.sf, color: Theme.of(context).colorScheme.onSurface),
            decoration: InputDecoration(
              labelText: 'E-mail',
              labelStyle: TextStyle(fontSize: 15 * context.sf),
              prefixIcon: Icon(Icons.email_outlined, size: 22 * context.sf, color: AppTheme.primaryRed),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(12 * context.sf)),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12 * context.sf),
                borderSide: BorderSide(color: AppTheme.primaryRed, width: 2),
              ),
              contentPadding: EdgeInsets.symmetric(vertical: 18 * context.sf, horizontal: 16 * context.sf),
            ),
            keyboardType: TextInputType.emailAddress,
          ),
          SizedBox(height: 20 * context.sf),

          TextFormField(
            controller: widget.controller.passwordController,
            obscureText: _obscurePassword,
            validator: widget.controller.validatePassword,
            style: TextStyle(fontSize: 15 * context.sf, color: Theme.of(context).colorScheme.onSurface),
            decoration: InputDecoration(
              labelText: 'Palavra-passe',
              labelStyle: TextStyle(fontSize: 15 * context.sf),
              prefixIcon: Icon(Icons.lock_outlined, size: 22 * context.sf, color: AppTheme.primaryRed),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12 * context.sf),
                borderSide: BorderSide(color: AppTheme.primaryRed, width: 2),
              ),
              suffixIcon: IconButton(
                icon: Icon(_obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined, size: 22 * context.sf, color: Colors.grey),
                onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
              ),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(12 * context.sf)),
              contentPadding: EdgeInsets.symmetric(vertical: 18 * context.sf, horizontal: 16 * context.sf),
            ),
          ),
          SizedBox(height: 20 * context.sf),

          TextFormField(
            controller: widget.controller.confirmPasswordController,
            obscureText: _obscurePassword,
            validator: widget.controller.validateConfirmPassword,
            style: TextStyle(fontSize: 15 * context.sf, color: Theme.of(context).colorScheme.onSurface),
            decoration: InputDecoration(
              labelText: 'Confirmar Palavra-passe',
              labelStyle: TextStyle(fontSize: 15 * context.sf),
              prefixIcon: Icon(Icons.lock_clock_outlined, size: 22 * context.sf, color: AppTheme.primaryRed),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12 * context.sf),
                borderSide: BorderSide(color: AppTheme.primaryRed, width: 2),
              ),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(12 * context.sf)),
              contentPadding: EdgeInsets.symmetric(vertical: 18 * context.sf, horizontal: 16 * context.sf),
            ),
          ),
        ],
      ),
    );
  }
}

class RegisterButton extends StatelessWidget {
  final RegisterController controller;
  const RegisterButton({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 58 * context.sf,
      child: ElevatedButton(
        onPressed: controller.isLoading ? null : () => controller.signUp(context),
        style: ElevatedButton.styleFrom(
          backgroundColor: AppTheme.primaryRed, // 👇 Cor do tema
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14 * context.sf)),
          elevation: 3,
        ),
        child: controller.isLoading
            ? SizedBox(
                width: 28 * context.sf, height: 28 * context.sf,
                child: const CircularProgressIndicator(strokeWidth: 3, valueColor: AlwaysStoppedAnimation<Color>(Colors.white)),
              )
            : Text('Criar Conta', style: TextStyle(fontSize: 18 * context.sf, fontWeight: FontWeight.bold)),
      ),
    );
  }
}