import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../domain/entities/pokemon.dart';
import '../providers/pokedex_provider.dart';
import '../widgets/pokemon_tile.dart';

class PokemonListPage extends ConsumerStatefulWidget {
  const PokemonListPage({Key? key}) : super(key: key);

  @override
  ConsumerState<PokemonListPage> createState() => _PokemonListPageState();
}

class _PokemonListPageState extends ConsumerState<PokemonListPage> {
  String _filter = 'ALL'; // ALL, CAUGHT
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  List<Pokemon> _applyFilter(List<Pokemon> all) {
    if (_filter == 'CAUGHT') return all.where((p) => p.isCaught).toList();
    return all;
  }

  @override
  Widget build(BuildContext context) {
    final pokedexAsync = ref.watch(pokedexProvider);
    final caughtCount = ref.watch(caughtCountProvider);

    return Container(
      decoration: const BoxDecoration(color: Color(0xFFC8D1D8)),
      child: Column(
        children: [
          // Header
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
            color: const Color(0xFF90A4AE),
            child: const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.menu, color: Colors.black87),
                Text('LIST - NATIONAL',
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
                Icon(Icons.search, color: Colors.black87),
              ],
            ),
          ),
          // Tabs
          Container(
            color: const Color(0xFF90A4AE),
            height: 40,
            child: Row(
              children: [
                _buildTab('ALL', _filter == 'ALL'),
                _buildTab('CAUGHT', _filter == 'CAUGHT'),
              ],
            ),
          ),
          // Caught Count Bar
          Container(
            padding: const EdgeInsets.symmetric(vertical: 12.0),
            decoration: const BoxDecoration(
              color: Color(0xFFB0BEC5),
              border: Border(bottom: BorderSide(color: Color(0xFF78909C), width: 2)),
            ),
            child: Column(
              children: [
                Text(
                  '${caughtCount.toString().padLeft(3, '0')} / ${pokedexAsync.valueOrNull?.length ?? 0}',
                  style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
                ),
                const Text('POKEMON DISCOVERED',
                    style: TextStyle(fontSize: 14, color: Colors.black54, letterSpacing: 1)),
              ],
            ),
          ),
          // The List
          Expanded(
            child: Stack(
              children: [
                Positioned.fill(
                  child: ListView.builder(
                    itemCount: 100,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) => Container(
                      height: 4,
                      margin: const EdgeInsets.only(bottom: 4),
                      color: Colors.black.withAlpha(2),
                    ),
                  ),
                ),
                pokedexAsync.when(
                  loading: () => const Center(child: CircularProgressIndicator()),
                  error: (e, _) => Center(
                    child: Text('Erreur de chargement\n$e',
                        textAlign: TextAlign.center,
                        style: const TextStyle(color: Colors.black54)),
                  ),
                  data: (all) {
                    final filtered = _applyFilter(all);
                    if (filtered.isEmpty) {
                      return Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Icon(Icons.search_off, size: 64, color: Colors.black26),
                            const SizedBox(height: 16),
                            Text('NO POKEMON FOUND IN $_filter',
                                style: const TextStyle(
                                    color: Colors.black45, fontSize: 18, fontWeight: FontWeight.bold)),
                          ],
                        ),
                      );
                    }
                    return ListView.builder(
                      controller: _scrollController,
                      padding: const EdgeInsets.all(12),
                      itemCount: filtered.length,
                      itemBuilder: (context, index) => PokemonTile(filtered[index]),
                    );
                  },
                ),
              ],
            ),
          ),
          // Footer
          Container(
            height: 24,
            color: const Color(0xFF1B2333),
            alignment: Alignment.center,
            child: const Text('NATIONAL POKEDEX V2.0',
                style: TextStyle(color: Colors.white70, fontSize: 12, letterSpacing: 1)),
          ),
        ],
      ),
    );
  }

  Widget _buildTab(String title, bool isSelected) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          if (_filter != title) {
            setState(() => _filter = title);
            if (_scrollController.hasClients) _scrollController.jumpTo(0);
          }
        },
        child: Container(
          decoration: BoxDecoration(
            color: isSelected ? const Color(0xFFB0BEC5) : Colors.transparent,
            border: isSelected
                ? const Border(bottom: BorderSide(color: Color(0xFFD32F2F), width: 3))
                : null,
          ),
          alignment: Alignment.center,
          child: Text(title,
              style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: isSelected ? Colors.black : Colors.black54)),
        ),
      ),
    );
  }
}