import 'package:flutter/material.dart';
import '../../../domain/entities/pokemon.dart';
import '../pokemon_type.dart';
import '../pokemon_image.dart';

/// Écran supérieur du détail : numéro, sprite (tap pour basculer shiny), nom et types.
class PokemonDetailTop extends StatelessWidget {
  final Pokemon pokemon;
  final bool isShiny;
  final VoidCallback onToggleShiny;
  final Color primaryColor;
  final Color primaryDark;
  final Color surfaceColor;

  const PokemonDetailTop({
    super.key,
    required this.pokemon,
    required this.isShiny,
    required this.onToggleShiny,
    required this.primaryColor,
    required this.primaryDark,
    required this.surfaceColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: surfaceColor,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: surfaceColor, width: 8),
      ),
      child: Container(
        color: const Color(0xFF90A4AE),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              color: surfaceColor,
              child: Text(
                "NO. ${pokemon.id.toString().padLeft(3, '0')}",
                style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
            GestureDetector(
              onTap: onToggleShiny,
              child: Container(
                height: 180,
                alignment: Alignment.center,
                color: const Color(0xFF81CCA5).withAlpha(153),
                child: PokemonImage(
                  imageUrl: isShiny ? pokemon.shinyImageUrl : pokemon.imageUrl,
                  fallbackUrl: isShiny ? pokemon.imageUrl : null,
                  fit: BoxFit.contain,
                ),
              ),
            ),
            Container(
              color: const Color(0xFF37474F),
              padding: const EdgeInsets.all(12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Text(
                      pokemon.formatedName.toUpperCase(),
                      style: const TextStyle(
                          color: Colors.white,
                          fontSize: 22,
                          fontWeight: FontWeight.bold,
                          letterSpacing: 2),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  const SizedBox(width: 8),
                  Row(
                    children: [
                      PokemonTypeWidget(pokemon.type1),
                      if (pokemon.type2 != null) const SizedBox(width: 4),
                      if (pokemon.type2 != null) PokemonTypeWidget(pokemon.type2!),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}