import 'package:flutter/material.dart';
import '../../../core/config/app_constants.dart';

/// Bouton "GEN FILTER" et son panneau dépliable de sélection des générations.
class GenFilterSection extends StatelessWidget {
  final bool isOpen;
  final VoidCallback onToggleOpen;
  final Set<int> selectedGens;
  final void Function(int) onToggle;

  const GenFilterSection({
    super.key,
    required this.isOpen,
    required this.onToggleOpen,
    required this.selectedGens,
    required this.onToggle,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        children: [
          SizedBox(
            width: double.infinity,
            child: OutlinedButton.icon(
              onPressed: onToggleOpen,
              icon: Icon(
                isOpen ? Icons.expand_less : Icons.filter_list,
                color: const Color(0xFF1B2333),
              ),
              label: const Text(
                'GEN FILTER',
                style: TextStyle(
                  color: Color(0xFF1B2333),
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                  letterSpacing: 2,
                ),
              ),
              style: OutlinedButton.styleFrom(
                side: const BorderSide(color: Color(0xFF1B2333), width: 2),
                padding: const EdgeInsets.symmetric(vertical: 12),
                shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
              ),
            ),
          ),
          AnimatedSize(
            duration: const Duration(milliseconds: 250),
            curve: Curves.easeInOut,
            child: isOpen
                ? _GenFilterPanel(selectedGens: selectedGens, onToggle: onToggle)
                : const SizedBox.shrink(),
          ),
        ],
      ),
    );
  }
}

class _GenFilterPanel extends StatelessWidget {
  final Set<int> selectedGens;
  final void Function(int) onToggle;

  const _GenFilterPanel({required this.selectedGens, required this.onToggle});

  static const _genNames = [
    'Gen I', 'Gen II', 'Gen III', 'Gen IV', 'Gen V', 'Gen VI', 'Gen VII', 'Gen VIII', 'Gen IX'
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 4),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: const Color(0xFF1B2333), width: 2),
      ),
      child: Column(
        children: List.generate(AppConstants.genRanges.length, (i) {
          final range = AppConstants.genRanges[i];
          final isSelected = selectedGens.contains(i);
          final isLast = i == AppConstants.genRanges.length - 1;
          return InkWell(
            onTap: () => onToggle(i),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
              decoration: BoxDecoration(
                color: isSelected ? const Color(0xFF1B2333).withAlpha(12) : Colors.transparent,
                border: isLast ? null : Border(bottom: BorderSide(color: Colors.grey.shade200)),
              ),
              child: Row(
                children: [
                  AnimatedContainer(
                    duration: const Duration(milliseconds: 150),
                    width: 20,
                    height: 20,
                    decoration: BoxDecoration(
                      color: isSelected ? const Color(0xFF3B6EE3) : Colors.transparent,
                      border: Border.all(
                        color: isSelected ? const Color(0xFF3B6EE3) : Colors.grey.shade400,
                        width: 2,
                      ),
                      borderRadius: BorderRadius.circular(3),
                    ),
                    child: isSelected ? const Icon(Icons.check, size: 13, color: Colors.white) : null,
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      _genNames[i],
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                        color: isSelected ? const Color(0xFF1B2333) : Colors.black54,
                      ),
                    ),
                  ),
                  Text(
                    '#${range.$1}–#${range.$2}',
                    style: TextStyle(fontSize: 12, color: Colors.grey.shade500),
                  ),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
}
