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 de carte de statistiques connecté au backend
class ConnectedStatsCard extends StatelessWidget {
  final String title;
  final IconData icon;
  final String Function(DashboardStatsEntity) valueExtractor;
  final String? Function(DashboardStatsEntity)? subtitleExtractor;
  final Color? customColor;
  final VoidCallback? onTap;

  const ConnectedStatsCard({
    super.key,
    required this.title,
    required this.icon,
    required this.valueExtractor,
    this.subtitleExtractor,
    this.customColor,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<DashboardBloc, DashboardState>(
      builder: (context, state) {
        if (state is DashboardLoading) {
          return _buildLoadingCard();
        } else if (state is DashboardLoaded || state is DashboardRefreshing) {
          final data = state is DashboardLoaded 
              ? state.dashboardData 
              : (state as DashboardRefreshing).dashboardData;
          return _buildDataCard(data.stats);
        } else if (state is DashboardError) {
          return _buildErrorCard(state.message);
        }
        return _buildLoadingCard();
      },
    );
  }

  Widget _buildDataCard(DashboardStatsEntity stats) {
    final value = valueExtractor(stats);
    final subtitle = subtitleExtractor?.call(stats);
    final color = customColor ?? DashboardTheme.royalBlue;

    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: DashboardTheme.cardDecoration,
        padding: const EdgeInsets.all(DashboardTheme.spacing16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(DashboardTheme.spacing8),
                  decoration: BoxDecoration(
                    color: color.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
                  ),
                  child: Icon(
                    icon,
                    color: color,
                    size: 24,
                  ),
                ),
                const SizedBox(width: DashboardTheme.spacing12),
                Expanded(
                  child: Text(
                    title,
                    style: DashboardTheme.titleSmall,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
            const SizedBox(height: DashboardTheme.spacing16),
            Text(
              value,
              style: DashboardTheme.metricLarge.copyWith(color: color),
            ),
            if (subtitle != null) ...[
              const SizedBox(height: DashboardTheme.spacing4),
              Text(
                subtitle,
                style: DashboardTheme.bodySmall,
              ),
            ],
          ],
        ),
      ),
    );
  }

  Widget _buildLoadingCard() {
    return Container(
      decoration: DashboardTheme.cardDecoration,
      padding: const EdgeInsets.all(DashboardTheme.spacing16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: DashboardTheme.grey200,
                  borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
                ),
              ),
              const SizedBox(width: DashboardTheme.spacing12),
              Expanded(
                child: Container(
                  height: 16,
                  decoration: BoxDecoration(
                    color: DashboardTheme.grey200,
                    borderRadius: BorderRadius.circular(4),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: DashboardTheme.spacing16),
          Container(
            height: 32,
            width: 80,
            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),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildErrorCard(String message) {
    return Container(
      decoration: DashboardTheme.cardDecoration,
      padding: const EdgeInsets.all(DashboardTheme.spacing16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(DashboardTheme.spacing8),
                decoration: BoxDecoration(
                  color: DashboardTheme.error.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(DashboardTheme.borderRadiusSmall),
                ),
                child: const Icon(
                  Icons.error_outline,
                  color: DashboardTheme.error,
                  size: 24,
                ),
              ),
              const SizedBox(width: DashboardTheme.spacing12),
              Expanded(
                child: Text(
                  title,
                  style: DashboardTheme.titleSmall,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          const SizedBox(height: DashboardTheme.spacing16),
          Text(
            '--',
            style: DashboardTheme.metricLarge.copyWith(
              color: DashboardTheme.grey400,
            ),
          ),
          const SizedBox(height: DashboardTheme.spacing4),
          Text(
            message,
            style: DashboardTheme.bodySmall.copyWith(
              color: DashboardTheme.error,
            ),
          ),
        ],
      ),
    );
  }
}
