import 'package:flutter/material.dart';

class CountriesSidebar extends StatelessWidget {
  final List<String> countries;
  final String selectedCountry;
  final String title;
  final ValueChanged<String> onCountrySelected;
  final bool isLoading;

  const CountriesSidebar({
    super.key,
    required this.countries,
    required this.selectedCountry,
    required this.onCountrySelected,
    this.title = 'Países',
    this.isLoading = false,
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final isLargeScreen = screenWidth > 900;
    final sidebarWidth = isLargeScreen ? 280.0 : 220.0;
    final headerHeight = isLargeScreen ? 70.0 : 60.0;
    final itemHeight = isLargeScreen ? 52.0 : 44.0;
    final fontSize = isLargeScreen ? 16.0 : 14.0;
    final headerFontSize = isLargeScreen ? 18.0 : 16.0;
    final horizontalPadding = isLargeScreen ? 20.0 : 16.0;

    return Container(
      width: sidebarWidth,
      decoration: BoxDecoration(
        color: const Color(0xFF14141f),
        border: Border(
          right: BorderSide(
            color: Colors.white.withValues(alpha: 0.08),
            width: 1,
          ),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: headerHeight,
            padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
            decoration: BoxDecoration(
              color: const Color(0xFF1a1a2e),
              border: Border(
                bottom: BorderSide(
                  color: Colors.white.withValues(alpha: 0.08),
                  width: 1,
                ),
              ),
            ),
            child: Row(
              children: [
                Icon(
                  Icons.flag,
                  color: Colors.red.shade400,
                  size: isLargeScreen ? 24 : 20,
                ),
                SizedBox(width: isLargeScreen ? 12 : 10),
                Text(
                  title,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: headerFontSize,
                    fontWeight: FontWeight.w600,
                    letterSpacing: 0.5,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: isLoading && countries.isEmpty
                ? Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: isLargeScreen ? 40 : 32,
                          height: isLargeScreen ? 40 : 32,
                          child: CircularProgressIndicator(
                            color: Colors.red.shade400,
                            strokeWidth: isLargeScreen ? 3 : 2,
                          ),
                        ),
                        SizedBox(height: isLargeScreen ? 16 : 12),
                        Text(
                          'Cargando países...',
                          style: TextStyle(
                            color: Colors.white.withValues(alpha: 0.6),
                            fontSize: fontSize,
                          ),
                        ),
                      ],
                    ),
                  )
                : countries.isEmpty
                ? Center(
                    child: Padding(
                      padding: EdgeInsets.all(horizontalPadding),
                      child: Text(
                        'No hay países disponibles',
                        style: TextStyle(
                          color: Colors.white.withValues(alpha: 0.5),
                          fontSize: fontSize,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  )
                : ListView.builder(
                    padding: EdgeInsets.symmetric(
                      vertical: isLargeScreen ? 12 : 8,
                    ),
                    itemCount: countries.length + 1,
                    itemBuilder: (context, index) {
                      if (index == 0) {
                        return _CountryListItem(
                          name: 'Todos',
                          isSelected: selectedCountry.isEmpty,
                          onTap: () => onCountrySelected(''),
                          itemHeight: itemHeight,
                          fontSize: fontSize,
                          horizontalPadding: horizontalPadding,
                          icon: Icons.apps,
                        );
                      }

                      final country = countries[index - 1];
                      return _CountryListItem(
                        name: country,
                        isSelected: selectedCountry == country,
                        onTap: () => onCountrySelected(country),
                        itemHeight: itemHeight,
                        fontSize: fontSize,
                        horizontalPadding: horizontalPadding,
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

class _CountryListItem extends StatelessWidget {
  final String name;
  final bool isSelected;
  final VoidCallback onTap;
  final double itemHeight;
  final double fontSize;
  final double horizontalPadding;
  final IconData? icon;

  const _CountryListItem({
    required this.name,
    required this.isSelected,
    required this.onTap,
    required this.itemHeight,
    required this.fontSize,
    required this.horizontalPadding,
    this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: horizontalPadding, vertical: 2),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(8),
          child: Container(
            height: itemHeight,
            padding: EdgeInsets.symmetric(horizontal: horizontalPadding * 0.8),
            decoration: BoxDecoration(
              color: isSelected ? Colors.red.shade600 : Colors.transparent,
              borderRadius: BorderRadius.circular(8),
              boxShadow: isSelected
                  ? [
                      BoxShadow(
                        color: Colors.red.withValues(alpha: 0.25),
                        blurRadius: 8,
                        offset: const Offset(0, 2),
                      ),
                    ]
                  : null,
            ),
            child: Row(
              children: [
                Container(
                  width: 3,
                  height: isSelected ? 20 : 0,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.white : Colors.transparent,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                SizedBox(width: isSelected ? 12 : 15),
                if (icon != null) ...[
                  Icon(
                    icon,
                    color: isSelected
                        ? Colors.white
                        : Colors.white.withValues(alpha: 0.6),
                    size: fontSize + 2,
                  ),
                  SizedBox(width: 10),
                ] else ...[
                  Icon(
                    Icons.circle,
                    color: isSelected
                        ? Colors.white
                        : Colors.white.withValues(alpha: 0.3),
                    size: 6,
                  ),
                  SizedBox(width: 12),
                ],
                Expanded(
                  child: Text(
                    name,
                    style: TextStyle(
                      color: isSelected
                          ? Colors.white
                          : Colors.white.withValues(alpha: 0.7),
                      fontSize: fontSize,
                      fontWeight: isSelected
                          ? FontWeight.w600
                          : FontWeight.w400,
                      letterSpacing: 0.3,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                if (isSelected)
                  Icon(Icons.check, color: Colors.white, size: fontSize + 2),
              ],
            ),
          ),
        ),
      ),
    );
  }
}