import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../domain/entities/dashboard_entity.dart';
import '../../bloc/dashboard_bloc.dart';
import '../../../../../shared/design_system/dashboard_theme.dart';

/// Widget des événements à venir connecté au backend
class ConnectedUpcomingEvents extends StatelessWidget {
  final int maxItems;
  final VoidCallback? onSeeAll;

  const ConnectedUpcomingEvents({
    super.key,
    this.maxItems = 3,
    this.onSeeAll,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: DashboardTheme.cardDecoration,
      padding: const EdgeInsets.all(DashboardTheme.spacing16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildHeader(),
          const SizedBox(height: DashboardTheme.spacing16),
          BlocBuilder<DashboardBloc, DashboardState>(
            builder: (context, state) {
              if (state is DashboardLoading) {
                return _buildLoadingList();
              } else if (state is DashboardLoaded || state is DashboardRefreshing) {
                final data = state is DashboardLoaded 
                    ? state.dashboardData 
                    : (state as DashboardRefreshing).dashboardData;
                return _buildEventsList(data.upcomingEvents);
              } else if (state is DashboardError) {
                return _buildErrorState(state.message);
              }
              return _buildEmptyState();
            },
          ),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    return Row(
      children: [
        Container(
          padding: const EdgeInsets.all(DashboardTheme.spacing8),
          decoration: BoxDecoration(
            color: DashboardTheme.royalBlue.withOpacity(0.1),
            borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
          ),
          child: const Icon(
            Icons.event,
            color: DashboardTheme.royalBlue,
            size: 20,
          ),
        ),
        const SizedBox(width: DashboardTheme.spacing12),
        const Expanded(
          child: Text(
            'Événements à venir',
            style: DashboardTheme.titleMedium,
          ),
        ),
        if (onSeeAll != null)
          TextButton(
            onPressed: onSeeAll,
            child: Text(
              'Voir tout',
              style: DashboardTheme.bodyMedium.copyWith(
                color: DashboardTheme.royalBlue,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
      ],
    );
  }

  Widget _buildEventsList(List<UpcomingEventEntity> events) {
    if (events.isEmpty) {
      return _buildEmptyState();
    }

    final displayEvents = events.take(maxItems).toList();

    return Column(
      children: displayEvents.asMap().entries.map((entry) {
        final index = entry.key;
        final event = entry.value;
        final isLast = index == displayEvents.length - 1;

        return Column(
          children: [
            _buildEventCard(event),
            if (!isLast) const SizedBox(height: DashboardTheme.spacing12),
          ],
        );
      }).toList(),
    );
  }

  Widget _buildEventCard(UpcomingEventEntity event) {
    return Container(
      decoration: BoxDecoration(
        color: DashboardTheme.grey50,
        borderRadius: BorderRadius.circular(DashboardTheme.borderRadius),
        border: Border.all(
          color: event.isToday 
              ? DashboardTheme.success 
              : event.isTomorrow 
                  ? DashboardTheme.warning 
                  : DashboardTheme.grey200,
          width: event.isToday || event.isTomorrow ? 2 : 1,
        ),
      ),
      padding: const EdgeInsets.all(DashboardTheme.spacing12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              // Image ou icône
              Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  color: DashboardTheme.royalBlue.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
                ),
                child: event.imageUrl != null
                    ? ClipRRect(
                        borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
                        child: Image.network(
                          event.imageUrl!,
                          fit: BoxFit.cover,
                          errorBuilder: (context, error, stackTrace) => const Icon(
                            Icons.event,
                            color: DashboardTheme.royalBlue,
                            size: 24,
                          ),
                        ),
                      )
                    : const Icon(
                        Icons.event,
                        color: DashboardTheme.royalBlue,
                        size: 24,
                      ),
              ),
              const SizedBox(width: DashboardTheme.spacing12),
              // Contenu principal
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      event.title,
                      style: DashboardTheme.titleSmall,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: DashboardTheme.spacing4),
                    Row(
                      children: [
                        const Icon(
                          Icons.location_on,
                          size: 14,
                          color: DashboardTheme.grey500,
                        ),
                        const SizedBox(width: DashboardTheme.spacing4),
                        Expanded(
                          child: Text(
                            event.location,
                            style: DashboardTheme.bodySmall,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              // Badge de temps
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: DashboardTheme.spacing8,
                  vertical: DashboardTheme.spacing4,
                ),
                decoration: BoxDecoration(
                  color: event.isToday 
                      ? DashboardTheme.success.withOpacity(0.1)
                      : event.isTomorrow 
                          ? DashboardTheme.warning.withOpacity(0.1)
                          : DashboardTheme.royalBlue.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Text(
                  event.daysUntilEvent,
                  style: DashboardTheme.bodySmall.copyWith(
                    color: event.isToday 
                        ? DashboardTheme.success
                        : event.isTomorrow 
                            ? DashboardTheme.warning
                            : DashboardTheme.royalBlue,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: DashboardTheme.spacing12),
          // Barre de progression des participants
          Row(
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const Text(
                          'Participants',
                          style: DashboardTheme.bodySmall,
                        ),
                        Text(
                          '${event.currentParticipants}/${event.maxParticipants}',
                          style: DashboardTheme.bodySmall.copyWith(
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: DashboardTheme.spacing4),
                    LinearProgressIndicator(
                      value: event.fillPercentage,
                      backgroundColor: DashboardTheme.grey200,
                      valueColor: AlwaysStoppedAnimation<Color>(
                        event.isFull 
                            ? DashboardTheme.error
                            : event.isAlmostFull 
                                ? DashboardTheme.warning
                                : DashboardTheme.success,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          // Tags
          if (event.tags.isNotEmpty) ...[
            const SizedBox(height: DashboardTheme.spacing8),
            Wrap(
              spacing: DashboardTheme.spacing4,
              runSpacing: DashboardTheme.spacing4,
              children: event.tags.take(3).map((tag) => Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: DashboardTheme.spacing8,
                  vertical: DashboardTheme.spacing4,
                ),
                decoration: BoxDecoration(
                  color: DashboardTheme.tealBlue.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  tag,
                  style: DashboardTheme.bodySmall.copyWith(
                    color: DashboardTheme.tealBlue,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              )).toList(),
            ),
          ],
        ],
      ),
    );
  }

  Widget _buildLoadingList() {
    return Column(
      children: List.generate(2, (index) => Column(
        children: [
          _buildLoadingCard(),
          if (index < 1) const SizedBox(height: DashboardTheme.spacing12),
        ],
      )),
    );
  }

  Widget _buildLoadingCard() {
    return Container(
      decoration: BoxDecoration(
        color: DashboardTheme.grey50,
        borderRadius: BorderRadius.circular(DashboardTheme.borderRadius),
        border: Border.all(color: DashboardTheme.grey200),
      ),
      padding: const EdgeInsets.all(DashboardTheme.spacing12),
      child: Column(
        children: [
          Row(
            children: [
              Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  color: DashboardTheme.grey200,
                  borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
                ),
              ),
              const SizedBox(width: DashboardTheme.spacing12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 16,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: DashboardTheme.grey200,
                        borderRadius: BorderRadius.circular(4),
                      ),
                    ),
                    const SizedBox(height: DashboardTheme.spacing4),
                    Container(
                      height: 12,
                      width: 120,
                      decoration: BoxDecoration(
                        color: DashboardTheme.grey100,
                        borderRadius: BorderRadius.circular(4),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                width: 60,
                height: 24,
                decoration: BoxDecoration(
                  color: DashboardTheme.grey200,
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ],
          ),
          const SizedBox(height: DashboardTheme.spacing12),
          Container(
            height: 4,
            width: double.infinity,
            decoration: BoxDecoration(
              color: DashboardTheme.grey200,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildErrorState(String message) {
    return Center(
      child: Column(
        children: [
          const Icon(
            Icons.error_outline,
            color: DashboardTheme.error,
            size: 48,
          ),
          const SizedBox(height: DashboardTheme.spacing8),
          Text(
            'Erreur de chargement',
            style: DashboardTheme.bodyMedium.copyWith(
              color: DashboardTheme.error,
            ),
          ),
          const SizedBox(height: DashboardTheme.spacing4),
          Text(
            message,
            style: DashboardTheme.bodySmall,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Column(
        children: [
          const Icon(
            Icons.event_busy,
            color: DashboardTheme.grey400,
            size: 48,
          ),
          const SizedBox(height: DashboardTheme.spacing8),
          Text(
            'Aucun événement à venir',
            style: DashboardTheme.bodyMedium.copyWith(
              color: DashboardTheme.grey500,
            ),
          ),
          const SizedBox(height: DashboardTheme.spacing4),
          const Text(
            'Les événements apparaîtront ici',
            style: DashboardTheme.bodySmall,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}
