import 'package:flutter/material.dart';
import '../../domain/entities/pokemon.dart';
import '../widgets/detail/pokemon_detail_top.dart';
import '../widgets/detail/pokemon_stats_panel.dart';

/// Fiche détaillée d'un Pokémon (reçu via les arguments de route).
class PokemonDetailPage extends StatefulWidget {
  const PokemonDetailPage({Key? key}) : super(key: key);

  @override
  State<PokemonDetailPage> createState() => _PokemonDetailPageState();
}

class _PokemonDetailPageState extends State<PokemonDetailPage> {
  bool _isShiny = false;

  @override
  Widget build(BuildContext context) {
    final pokemon = ModalRoute.of(context)!.settings.arguments as Pokemon;

    return Scaffold(
      backgroundColor: const Color(0xFF1B2333),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
          child: Container(
            decoration: BoxDecoration(
              color: const Color(0xFFD32F2F),
              borderRadius: BorderRadius.circular(30),
              border: Border.all(color: const Color(0xFFA12020), width: 4),
            ),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  _backBar(context),
                  PokemonDetailTop(
                    pokemon: pokemon,
                    isShiny: _isShiny,
                    onToggleShiny: () => setState(() => _isShiny = !_isShiny),
                  ),
                  const SizedBox(height: 20),
                  _hinge(),
                  const SizedBox(height: 20),
                  PokemonStatsPanel(pokemon: pokemon),
                  const SizedBox(height: 30),
                  _bottomDots(),
                  const SizedBox(height: 20),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _backBar(BuildContext context) {
    return Container(
      height: 50,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      alignment: Alignment.centerLeft,
      child: GestureDetector(
        onTap: () => Navigator.pop(context),
        child: Container(
          padding: const EdgeInsets.all(4),
          decoration: const BoxDecoration(color: Color(0xFFA12020), shape: BoxShape.circle),
          child: const Icon(Icons.arrow_back, color: Colors.white),
        ),
      ),
    );
  }

  Widget _hinge() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(height: 6, width: 40, color: const Color(0xFFA12020)),
        Container(height: 6, width: 40, color: const Color(0xFFA12020)),
      ],
    );
  }

  Widget _bottomDots() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(
        4,
        (i) => Container(
          width: 6,
          height: 6,
          margin: const EdgeInsets.symmetric(horizontal: 2),
          decoration: const BoxDecoration(color: Color(0xFFA12020), shape: BoxShape.circle),
        ),
      ),
    );
  }
}