import 'package:flutter/material.dart';
import '../../../../shared/theme/app_theme.dart';

/// Widget de contrôles pour les modes d'affichage et le tri
class MembresViewControls extends StatelessWidget {
  final String viewMode;
  final String sortBy;
  final bool sortAscending;
  final int totalCount;
  final Function(String) onViewModeChanged;
  final Function(String) onSortChanged;
  final VoidCallback onSortDirectionChanged;

  const MembresViewControls({
    super.key,
    required this.viewMode,
    required this.sortBy,
    required this.sortAscending,
    required this.totalCount,
    required this.onViewModeChanged,
    required this.onSortChanged,
    required this.onSortDirectionChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.fromLTRB(16, 0, 16, 8),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: Colors.grey[200]!),
      ),
      child: Row(
        children: [
          // Compteur
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: AppTheme.primaryColor.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Text(
              '$totalCount membre${totalCount > 1 ? 's' : ''}',
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w500,
                color: AppTheme.primaryColor,
              ),
            ),
          ),
          
          const Spacer(),
          
          // Contrôles de tri
          _buildSortControls(),
          
          const SizedBox(width: 12),
          
          // Modes d'affichage
          _buildViewModeControls(),
        ],
      ),
    );
  }

  Widget _buildSortControls() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        PopupMenuButton<String>(
          initialValue: sortBy,
          onSelected: onSortChanged,
          icon: Icon(
            Icons.sort,
            size: 20,
            color: AppTheme.textSecondary,
          ),
          itemBuilder: (context) => [
            const PopupMenuItem(
              value: 'name',
              child: Row(
                children: [
                  Icon(Icons.sort_by_alpha, size: 16),
                  SizedBox(width: 8),
                  Text('Nom'),
                ],
              ),
            ),
            const PopupMenuItem(
              value: 'date',
              child: Row(
                children: [
                  Icon(Icons.date_range, size: 16),
                  SizedBox(width: 8),
                  Text('Date d\'adhésion'),
                ],
              ),
            ),
            const PopupMenuItem(
              value: 'age',
              child: Row(
                children: [
                  Icon(Icons.cake, size: 16),
                  SizedBox(width: 8),
                  Text('Âge'),
                ],
              ),
            ),
            const PopupMenuItem(
              value: 'status',
              child: Row(
                children: [
                  Icon(Icons.info, size: 16),
                  SizedBox(width: 8),
                  Text('Statut'),
                ],
              ),
            ),
          ],
        ),
        
        // Direction du tri
        GestureDetector(
          onTap: onSortDirectionChanged,
          child: Container(
            padding: const EdgeInsets.all(4),
            child: Icon(
              sortAscending ? Icons.arrow_upward : Icons.arrow_downward,
              size: 16,
              color: AppTheme.primaryColor,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildViewModeControls() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(6),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          _buildViewModeButton('list', Icons.view_list, 'Liste'),
          _buildViewModeButton('card', Icons.view_module, 'Cartes'),
          _buildViewModeButton('grid', Icons.grid_view, 'Grille'),
        ],
      ),
    );
  }

  Widget _buildViewModeButton(String mode, IconData icon, String tooltip) {
    final isSelected = viewMode == mode;
    
    return GestureDetector(
      onTap: () => onViewModeChanged(mode),
      child: Tooltip(
        message: tooltip,
        child: Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: isSelected ? AppTheme.primaryColor : Colors.transparent,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Icon(
            icon,
            size: 18,
            color: isSelected ? Colors.white : AppTheme.textSecondary,
          ),
        ),
      ),
    );
  }
}