import 'package:flutter/material.dart';
import '../models/pokemon.dart';
import 'pokemon_image.dart';

class PokemonTile extends StatelessWidget {
  const PokemonTile(this.pokemon, {Key? key}) : super(key: key);

  final Pokemon pokemon;

  @override
  Widget build(BuildContext context) {
    // If not caught, we don't allow navigating to the detail page (to force guessing)
    return GestureDetector(
      onTap: pokemon.isCaught ? () {
        Navigator.pushNamed(context, "/pokemon-detail", arguments: pokemon);
      } : null,
      child: Container(
        height: 80,
        margin: const EdgeInsets.only(bottom: 12),
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          color: const Color(0xFFE2EBF0), // lighter grey for tile surface
          borderRadius: BorderRadius.circular(4),
          border: Border.all(color: Colors.white, width: 2),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withAlpha(25),
              blurRadius: 2,
              offset: const Offset(2, 2),
            )
          ]
        ),
        child: Row(
          children: [
            // Image box
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                color: pokemon.isCaught ? const Color(0xFF78909C) : Colors.grey[700],
                border: Border.all(color: Colors.white, width: 2),
                borderRadius: BorderRadius.circular(4),
              ),
              child: pokemon.isCaught 
                ? PokemonImage(imageUrl: pokemon.imageUrl, fit: BoxFit.contain)
                : const SizedBox.expand(),
            ),
            const SizedBox(width: 16),
            
            // Name texts
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'No. ${pokemon.id.toString().padLeft(3, '0')}',
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                      color: Colors.grey[600],
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    pokemon.isCaught ? pokemon.formatedName.toUpperCase() : '???',
                    style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                      color: pokemon.isCaught ? Colors.black87 : Colors.grey[500],
                    ),
                  ),
                ],
              ),
            ),
            
            // Caught check icon
            if (pokemon.isCaught)
              const Icon(Icons.check_circle, color: Colors.green, size: 28)
            else
              Icon(Icons.help, color: Colors.grey[400], size: 24),
          ],
        ),
      ),
    );
  }
}