import 'package:flutter/material.dart';
import 'package:playmaker/Controllers/login_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    
    // TAMANHOS AUMENTADOS para tablets
    final logoSize = screenWidth > 600 ? 400.0 : 300.0; // ↑ Aumentado
    final titleFontSize = screenWidth > 600 ? 48.0 : 36.0; // ↑ Aumentado
    final subtitleFontSize = screenWidth > 600 ? 22.0 : 18.0; // ↑ Aumentado

    return Column(
      children: [
        Container(
          width: logoSize,
          height: logoSize,
          child: Image.asset(
            'assets/playmaker-logo.png',
            fit: BoxFit.contain,
          ),
        ),
       SizedBox(height: screenWidth > 600 ? 1.0 : 1.0), 
        
        Text(
          'BasketTrack',
          style: TextStyle(
            fontSize: titleFontSize,
            fontWeight: FontWeight.bold,
            color: Colors.grey[900],
          ),
        ),
         SizedBox(height: screenWidth > 600 ? 1.0 : 1.0), 
        
        Text(
          'Gere as tuas equipas e estatísticas',
          style: TextStyle(
            fontSize: subtitleFontSize,
            color: Colors.grey[600],
            fontWeight: FontWeight.w500, // ↑ Adicionado peso da fonte
          ),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

class LoginFormFields extends StatelessWidget {
  final LoginController controller;

  const LoginFormFields({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    
    // TAMANHOS AUMENTADOS
    final verticalPadding = screenWidth > 600 ? 26.0 : 20.0; // ↑ Aumentado
    final spacing = screenWidth > 600 ? 28.0 : 20.0; // ↑ Aumentado
    final labelFontSize = screenWidth > 600 ? 18.0 : 16.0; // ↑ Aumentado
    final textFontSize = screenWidth > 600 ? 18.0 : 16.0; // ↑ Aumentado

    return Column(
      children: [
        TextField(
          controller: controller.emailController,
          style: TextStyle(fontSize: textFontSize), // ↑ Tamanho do texto
          decoration: InputDecoration(
            labelText: 'E-mail',
            labelStyle: TextStyle(fontSize: labelFontSize), // ↑ Tamanho do label
            prefixIcon: Icon(Icons.email_outlined, size: 24), // ↑ Ícone maior
            errorText: controller.emailError,
            errorStyle: TextStyle(fontSize: 14), // ↑ Tamanho do erro
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: BorderSide(color: Colors.grey[400]!),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: BorderSide(color: Colors.grey[400]!),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: const BorderSide(color: Color(0xFFE74C3C), width: 2),
            ),
            contentPadding: EdgeInsets.symmetric(
              horizontal: 18, // ↑ Aumentado
              vertical: verticalPadding,
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (_) {
            if (controller.emailError != null) {
              controller.validateEmail(controller.emailController.text);
            }
          },
        ),
        SizedBox(height: spacing),
        
        TextField(
          controller: controller.passwordController,
          style: TextStyle(fontSize: textFontSize), // ↑ Tamanho do texto
          decoration: InputDecoration(
            labelText: 'Palavra-passe',
            labelStyle: TextStyle(fontSize: labelFontSize), // ↑ Tamanho do label
            prefixIcon: Icon(Icons.lock_outlined, size: 24), // ↑ Ícone maior
            suffixIcon: IconButton(
              icon: Icon(
                controller.obscurePassword 
                    ? Icons.visibility_outlined 
                    : Icons.visibility_off_outlined,
                color: Colors.grey[600],
                size: 24, // ↑ Ícone maior
              ),
              onPressed: controller.togglePasswordVisibility,
            ),
            errorText: controller.passwordError,
            errorStyle: TextStyle(fontSize: 14), // ↑ Tamanho do erro
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: BorderSide(color: Colors.grey[400]!),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: BorderSide(color: Colors.grey[400]!),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12),
              borderSide: const BorderSide(color: Color(0xFFE74C3C), width: 2),
            ),
            contentPadding: EdgeInsets.symmetric(
              horizontal: 18, // ↑ Aumentado
              vertical: verticalPadding,
            ),
          ),
          obscureText: controller.obscurePassword,
          onChanged: (_) {
            if (controller.passwordError != null) {
              controller.validatePassword(controller.passwordController.text);
            }
          },
        ),
        SizedBox(height: screenWidth > 600 ? 20.0 : 14.0), // ↑ Aumentado
        
        Align(
          alignment: Alignment.centerRight,
          child: TextButton(
            onPressed: () {},
            style: TextButton.styleFrom(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8), // ↑ Mais espaço
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            child: Text(
              'Recuperar Palavra-passe',
              style: TextStyle(
                fontSize: screenWidth > 600 ? 18.0 : 15.0, // ↑ Aumentado
                color: const Color(0xFFE74C3C),
                fontWeight: FontWeight.w600, // ↑ Mais negrito
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class LoginButton extends StatelessWidget {
  final LoginController controller;
  final VoidCallback onLoginSuccess;

  const LoginButton({
    super.key,
    required this.controller,
    required this.onLoginSuccess,
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    
    // BOTÕES MAIORES
    final buttonHeight = screenWidth > 600 ? 70.0 : 58.0; // ↑ Aumentado
    final fontSize = screenWidth > 600 ? 22.0 : 18.0; // ↑ Aumentado

    return SizedBox(
      width: double.infinity,
      height: buttonHeight,
      child: ElevatedButton(
        onPressed: controller.isLoading ? null : () async {
          final success = await controller.login();
          if (success) {
            onLoginSuccess();
          }
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFFE74C3C),
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(14), // ↑ Bordas mais arredondadas
          ),
          elevation: 3, // ↑ Sombra mais pronunciada
        ),
        child: controller.isLoading
            ? SizedBox(
                width: 28, // ↑ Aumentado
                height: 28, // ↑ Aumentado
                child: CircularProgressIndicator(
                  strokeWidth: 3, // ↑ Aumentado
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                ),
              )
            : Text(
                'Entrar',
                style: TextStyle(
                  fontSize: fontSize,
                  fontWeight: FontWeight.w700, // ↑ Mais negrito
                ),
              ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    
    // BOTÃO MAIOR
    final buttonHeight = screenWidth > 600 ? 70.0 : 58.0; // ↑ Aumentado
    final fontSize = screenWidth > 600 ? 22.0 : 18.0; // ↑ Aumentado

    return SizedBox(
      width: double.infinity,
      height: buttonHeight,
      child: OutlinedButton(
        onPressed: () {},
        style: OutlinedButton.styleFrom(
          foregroundColor: const Color(0xFFE74C3C),
          side: const BorderSide(color: Color(0xFFE74C3C), width: 2), // ↑ Borda mais grossa
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(14), // ↑ Bordas mais arredondadas
          ),
        ),
        child: Text(
          'Criar Conta',
          style: TextStyle(
            fontSize: fontSize,
            fontWeight: FontWeight.w700, // ↑ Mais negrito
          ),
        ),
      ),
    );
  }
}