import 'package:flutter/material.dart';

class SimpleCountriesSidebar extends StatelessWidget {
  final List<String> countries;
  final String selectedCountry;
  final ValueChanged<String> onCountrySelected;
  final bool isLoading;
  final bool isOrganizing;
  final bool showFootballCategory;
  final VoidCallback? onFootballSelected;

  const SimpleCountriesSidebar({
    super.key,
    required this.countries,
    required this.selectedCountry,
    required this.onCountrySelected,
    this.isLoading = false,
    this.isOrganizing = false,
    this.showFootballCategory = false,
    this.onFootballSelected,
  });

  static const String _footballCategoryName = 'Fútbol Argentino';

  @override
  Widget build(BuildContext context) {
    if (countries.isNotEmpty) {
      for (int i = 0; i < countries.length && i < 10; i++) {}
    }

    return Container(
      width: 250,
      color: Colors.grey[900],
      child: Column(
        children: [
          // Header
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.red,
            child: const Row(
              children: [
                Icon(Icons.public, color: Colors.white),
                SizedBox(width: 8),
                Text(
                  'PAÍSES',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

          // List
          Expanded(
            child: isOrganizing || (isLoading && countries.isEmpty)
                ? const Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        CircularProgressIndicator(color: Colors.red),
                        SizedBox(height: 16),
                        Text(
                          'Organizando países...',
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    ),
                  )
                : countries.isEmpty
                ? const Center(
                    child: Text(
                      'No hay países',
                      style: TextStyle(color: Colors.white54),
                    ),
                  )
                : ListView.builder(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    itemCount: _getItemCount(),
                    itemBuilder: (context, index) {
                      return _buildItemAtIndex(context, index);
                    },
                  ),
          ),
        ],
      ),
    );
  }

  Widget _buildCountryItem(String name, bool isSelected, VoidCallback onTap) {
    return FocusableActionDetector(
      actions: <Type, Action<Intent>>{
        ActivateIntent: CallbackAction<ActivateIntent>(
          onInvoke: (intent) {
            onTap();
            return null;
          },
        ),
        ButtonActivateIntent: CallbackAction<ButtonActivateIntent>(
          onInvoke: (intent) {
            onTap();
            return null;
          },
        ),
      },
      child: Builder(
        builder: (context) {
          final hasFocus = Focus.of(context).hasFocus;
          return GestureDetector(
            onTap: onTap,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              decoration: BoxDecoration(
                color: isSelected
                    ? Colors.red
                    : (hasFocus
                          ? Colors.red.withValues(alpha: 0.5)
                          : Colors.transparent),
                border: Border(
                  left: BorderSide(
                    color: isSelected
                        ? Colors.white
                        : (hasFocus ? Colors.white : Colors.transparent),
                    width: 4,
                  ),
                ),
              ),
              child: Text(
                name,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14,
                  fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  int _getItemCount() {
    int count = countries.length + 1; // +1 for "Todos"
    if (showFootballCategory) {
      count += 1; // +1 for "Fútbol Argentino"
    }
    return count;
  }

  Widget _buildItemAtIndex(BuildContext context, int index) {
    if (index == 0) {
      return _buildCountryItem(
        'Todos',
        selectedCountry.isEmpty,
        () => onCountrySelected(''),
      );
    }

    // Find insertion point for "Fútbol Argentino" (after Perú)
    final peruIndex = countries.indexOf('Perú');
    final footballInsertIndex = peruIndex >= 0
        ? peruIndex + 1
        : countries.length;

    if (showFootballCategory) {
      // Adjust for "Todos" at index 0 and "Fútbol Argentino" after Perú
      if (index == footballInsertIndex + 1) {
        return _buildFootballItem();
      }

      // Map the adjusted index to the actual country list
      int countryIndex;
      if (index <= footballInsertIndex) {
        // Before football item
        countryIndex = index - 1;
      } else {
        // After football item
        countryIndex = index - 2;
      }

      if (countryIndex >= 0 && countryIndex < countries.length) {
        final country = countries[countryIndex];
        return _buildCountryItem(
          country,
          selectedCountry == country,
          () => onCountrySelected(country),
        );
      }
    } else {
      // Normal behavior without football category
      final country = countries[index - 1];
      return _buildCountryItem(
        country,
        selectedCountry == country,
        () => onCountrySelected(country),
      );
    }

    return const SizedBox.shrink();
  }

  Widget _buildFootballItem() {
    final isSelected = selectedCountry == _footballCategoryName;
    return FocusableActionDetector(
      actions: <Type, Action<Intent>>{
        ActivateIntent: CallbackAction<ActivateIntent>(
          onInvoke: (intent) {
            onFootballSelected?.call();
            return null;
          },
        ),
        ButtonActivateIntent: CallbackAction<ButtonActivateIntent>(
          onInvoke: (intent) {
            onFootballSelected?.call();
            return null;
          },
        ),
      },
      child: Builder(
        builder: (context) {
          final hasFocus = Focus.of(context).hasFocus;
          return GestureDetector(
            onTap: onFootballSelected,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              decoration: BoxDecoration(
                color: isSelected
                    ? Colors.green[700]
                    : (hasFocus
                          ? Colors.green[700]?.withValues(alpha: 0.8)
                          : Colors.green[900]?.withValues(alpha: 0.3)),
                border: Border(
                  left: BorderSide(
                    color: isSelected
                        ? Colors.white
                        : (hasFocus ? Colors.white : Colors.green[400]!),
                    width: 4,
                  ),
                ),
              ),
              child: Row(
                children: [
                  Icon(Icons.sports_soccer, color: Colors.white, size: 20),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      _footballCategoryName,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14,
                        fontWeight: isSelected
                            ? FontWeight.bold
                            : FontWeight.normal,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}