import 'package:flutter/material.dart';
import 'package:playmaker/controllers/login_controller.dart';
import 'package:playmaker/pages/RegisterPage.dart';
import 'package:playmaker/classe/theme.dart'; // 👇 IMPORT DO TEMA
import '../utils/size_extension.dart'; 

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: 200 * context.sf, 
          height: 200 * context.sf,
          child: Image.asset(
            'assets/playmaker-logos.png',
            fit: BoxFit.contain,
          ),
        ),
        Text(
          'BasketTrack',
          style: TextStyle(
            fontSize: 36 * context.sf,
            fontWeight: FontWeight.bold,
            color: Theme.of(context).colorScheme.onSurface, // 👇 Adaptável ao Modo Escuro
          ),
        ),
        SizedBox(height: 6 * context.sf), 
        Text(
          'Gere as tuas equipas e estatísticas',
          style: TextStyle(
            fontSize: 16 * context.sf,
            color: Colors.grey, // Mantemos cinza para subtítulo
            fontWeight: FontWeight.w500,
          ),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

class LoginFormFields extends StatelessWidget {
  final LoginController controller;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: controller.emailController,
          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), // 👇 Cor do tema
            errorText: controller.emailError, 
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(12 * context.sf)),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12 * context.sf),
              borderSide: BorderSide(color: AppTheme.primaryRed, width: 2), // 👇 Cor do tema ao focar
            ),
            contentPadding: EdgeInsets.symmetric(vertical: 18 * context.sf, horizontal: 16 * context.sf),
          ),
          keyboardType: TextInputType.emailAddress,
        ),
        SizedBox(height: 20 * context.sf),
        TextField(
          controller: controller.passwordController,
          obscureText: controller.obscurePassword,
          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), // 👇 Cor do tema
            errorText: controller.passwordError,
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(12 * context.sf),
              borderSide: BorderSide(color: AppTheme.primaryRed, width: 2), // 👇 Cor do tema ao focar
            ),
            suffixIcon: IconButton(
              icon: Icon(
                controller.obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined,
                size: 22 * context.sf,
                color: Colors.grey,
              ),
              onPressed: controller.togglePasswordVisibility,
            ),
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(12 * context.sf)),
            contentPadding: EdgeInsets.symmetric(vertical: 18 * context.sf, horizontal: 16 * context.sf),
          ),
        ),
      ],
    );
  }
}

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) {
    return SizedBox(
      width: double.infinity,
      height: 58 * context.sf,
      child: ElevatedButton(
        onPressed: controller.isLoading ? null : () async {
          final success = await controller.login();
          if (success) onLoginSuccess();
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: AppTheme.primaryRed, // 👇 Usando a 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('Entrar', style: TextStyle(fontSize: 18 * context.sf, fontWeight: FontWeight.bold)),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 58 * context.sf,
      child: OutlinedButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => const RegisterPage()));
        },
        style: OutlinedButton.styleFrom(
          foregroundColor: AppTheme.primaryRed, // 👇 Usando a cor do tema
          side: BorderSide(color: AppTheme.primaryRed, width: 2 * context.sf), // 👇 Usando a cor do tema
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14 * context.sf)),
        ),
        child: Text('Criar Conta', style: TextStyle(fontSize: 18 * context.sf, fontWeight: FontWeight.bold)),
      ),
    );
  }
}