import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../domain/entities/pokemon.dart';
import '../providers/locale_provider.dart';
import '../providers/repository_provider.dart';
import '../providers/theme_provider.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 ConsumerStatefulWidget {
  const PokemonDetailPage({Key? key}) : super(key: key);

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

class _PokemonDetailPageState extends ConsumerState<PokemonDetailPage> {
  bool _isShiny = false;
  String? _englishGenus;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _fetchEnglishGenusIfNeeded();
  }

  Future<void> _fetchEnglishGenusIfNeeded() async {
    final lang = ref.read(localeProvider).languageCode;
    if (lang != 'en') return;
    final pokemon = ModalRoute.of(context)!.settings.arguments as Pokemon;
    final genus = await ref.read(pokemonRepositoryProvider).getEnglishGenus(pokemon.id);
    if (mounted && genus != null) setState(() => _englishGenus = genus);
  }

  @override
  Widget build(BuildContext context) {
    final pokemon = ModalRoute.of(context)!.settings.arguments as Pokemon;
    final palette = appPalettes[ref.watch(themeProvider)];
    final primaryDark = HSLColor.fromColor(palette.primary)
        .withLightness(
            (HSLColor.fromColor(palette.primary).lightness - 0.12).clamp(0.0, 1.0))
        .toColor();

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

  Widget _backBar(BuildContext context, Color primaryDark) {
    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: BoxDecoration(color: primaryDark, shape: BoxShape.circle),
          child: const Icon(Icons.arrow_back, color: Colors.white),
        ),
      ),
    );
  }

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

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