import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.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 graphique pour le dashboard
class DashboardChartWidget extends StatelessWidget {
  final String title;
  final DashboardChartType chartType;
  final double height;

  const DashboardChartWidget({
    super.key,
    required this.title,
    required this.chartType,
    this.height = 200,
  });

  @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),
          SizedBox(
            height: height,
            child: BlocBuilder<DashboardBloc, DashboardState>(
              builder: (context, state) {
                if (state is DashboardLoading) {
                  return _buildLoadingChart();
                } else if (state is DashboardLoaded || state is DashboardRefreshing) {
                  final data = state is DashboardLoaded 
                      ? state.dashboardData 
                      : (state as DashboardRefreshing).dashboardData;
                  return _buildChart(data);
                } else if (state is DashboardError) {
                  return _buildErrorChart();
                }
                return _buildEmptyChart();
              },
            ),
          ),
        ],
      ),
    );
  }

  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: Icon(
            _getChartIcon(),
            color: DashboardTheme.royalBlue,
            size: 20,
          ),
        ),
        const SizedBox(width: DashboardTheme.spacing12),
        Expanded(
          child: Text(
            title,
            style: DashboardTheme.titleMedium,
          ),
        ),
      ],
    );
  }

  Widget _buildChart(DashboardEntity data) {
    switch (chartType) {
      case DashboardChartType.memberActivity:
        return _buildMemberActivityChart(data.stats);
      case DashboardChartType.contributionTrend:
        return _buildContributionTrendChart(data.stats);
      case DashboardChartType.eventParticipation:
        return _buildEventParticipationChart(data.upcomingEvents);
      case DashboardChartType.monthlyGrowth:
        return _buildMonthlyGrowthChart(data.stats);
    }
  }

  Widget _buildMemberActivityChart(DashboardStatsEntity stats) {
    return PieChart(
      PieChartData(
        sectionsSpace: 2,
        centerSpaceRadius: 40,
        sections: [
          PieChartSectionData(
            color: DashboardTheme.success,
            value: stats.activeMembers.toDouble(),
            title: '${stats.activeMembers}',
            radius: 50,
            titleStyle: DashboardTheme.bodySmall.copyWith(
              color: DashboardTheme.white,
              fontWeight: FontWeight.bold,
            ),
          ),
          PieChartSectionData(
            color: DashboardTheme.grey300,
            value: (stats.totalMembers - stats.activeMembers).toDouble(),
            title: '${stats.totalMembers - stats.activeMembers}',
            radius: 45,
            titleStyle: DashboardTheme.bodySmall.copyWith(
              color: DashboardTheme.grey700,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildContributionTrendChart(DashboardStatsEntity stats) {
    return LineChart(
      LineChartData(
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
          horizontalInterval: stats.totalContributionAmount / 4,
          getDrawingHorizontalLine: (value) {
            return const FlLine(
              color: DashboardTheme.grey200,
              strokeWidth: 1,
            );
          },
        ),
        titlesData: FlTitlesData(
          show: true,
          rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
          topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
          bottomTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 30,
              interval: 1,
              getTitlesWidget: (double value, TitleMeta meta) {
                const months = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'];
                if (value.toInt() >= 0 && value.toInt() < months.length) {
                  return Text(
                    months[value.toInt()],
                    style: DashboardTheme.bodySmall,
                  );
                }
                return const Text('');
              },
            ),
          ),
          leftTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              interval: stats.totalContributionAmount / 4,
              reservedSize: 60,
              getTitlesWidget: (double value, TitleMeta meta) {
                return Text(
                  '${(value / 1000).toStringAsFixed(0)}K',
                  style: DashboardTheme.bodySmall,
                );
              },
            ),
          ),
        ),
        borderData: FlBorderData(show: false),
        minX: 0,
        maxX: 5,
        minY: 0,
        maxY: stats.totalContributionAmount,
        lineBarsData: [
          LineChartBarData(
            spots: _generateContributionSpots(stats),
            isCurved: true,
            gradient: const LinearGradient(
              colors: [
                DashboardTheme.tealBlue,
                DashboardTheme.royalBlue,
              ],
            ),
            barWidth: 3,
            isStrokeCapRound: true,
            dotData: const FlDotData(show: true),
            belowBarData: BarAreaData(
              show: true,
              gradient: LinearGradient(
                colors: [
                  DashboardTheme.tealBlue.withOpacity(0.3),
                  DashboardTheme.royalBlue.withOpacity(0.1),
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildEventParticipationChart(List<UpcomingEventEntity> events) {
    if (events.isEmpty) {
      return _buildEmptyChart();
    }

    return BarChart(
      BarChartData(
        alignment: BarChartAlignment.spaceAround,
        maxY: events.map((e) => e.maxParticipants).reduce((a, b) => a > b ? a : b).toDouble(),
        barTouchData: BarTouchData(enabled: false),
        titlesData: FlTitlesData(
          show: true,
          bottomTitles: AxisTitles(
            sideTitles: SideTitles(
              showTitles: true,
              getTitlesWidget: (double value, TitleMeta meta) {
                if (value.toInt() < events.length) {
                  return Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text(
                      events[value.toInt()].title.length > 8
                          ? '${events[value.toInt()].title.substring(0, 8)}...'
                          : events[value.toInt()].title,
                      style: DashboardTheme.bodySmall,
                      textAlign: TextAlign.center,
                    ),
                  );
                }
                return const Text('');
              },
              reservedSize: 40,
            ),
          ),
          leftTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
          topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
          rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
        ),
        borderData: FlBorderData(show: false),
        barGroups: events.asMap().entries.map((entry) {
          final index = entry.key;
          final event = entry.value;
          return BarChartGroupData(
            x: index,
            barRods: [
              BarChartRodData(
                toY: event.currentParticipants.toDouble(),
                color: event.isFull 
                    ? DashboardTheme.error
                    : event.isAlmostFull 
                        ? DashboardTheme.warning
                        : DashboardTheme.success,
                width: 16,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(4),
                  topRight: Radius.circular(4),
                ),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }

  Widget _buildMonthlyGrowthChart(DashboardStatsEntity stats) {
    return LineChart(
      LineChartData(
        gridData: const FlGridData(show: false),
        titlesData: const FlTitlesData(show: false),
        borderData: FlBorderData(show: false),
        minX: 0,
        maxX: 11,
        minY: -5,
        maxY: 20,
        lineBarsData: [
          LineChartBarData(
            spots: _generateGrowthSpots(stats.monthlyGrowth),
            isCurved: true,
            color: stats.hasGrowth ? DashboardTheme.success : DashboardTheme.error,
            barWidth: 3,
            isStrokeCapRound: true,
            dotData: const FlDotData(show: false),
            belowBarData: BarAreaData(
              show: true,
              color: (stats.hasGrowth ? DashboardTheme.success : DashboardTheme.error)
                  .withOpacity(0.2),
            ),
          ),
        ],
      ),
    );
  }

  List<FlSpot> _generateContributionSpots(DashboardStatsEntity stats) {
    final baseAmount = stats.totalContributionAmount / 6;
    return [
      FlSpot(0, baseAmount * 0.8),
      FlSpot(1, baseAmount * 1.2),
      FlSpot(2, baseAmount * 0.9),
      FlSpot(3, baseAmount * 1.5),
      FlSpot(4, baseAmount * 1.1),
      FlSpot(5, baseAmount * 1.3),
    ];
  }

  List<FlSpot> _generateGrowthSpots(double currentGrowth) {
    final baseGrowth = currentGrowth;
    return List.generate(12, (index) {
      final variation = (index % 3 - 1) * 2.0;
      return FlSpot(index.toDouble(), baseGrowth + variation);
    });
  }

  Widget _buildLoadingChart() {
    return Container(
      decoration: BoxDecoration(
        color: DashboardTheme.grey100,
        borderRadius: BorderRadius.circular(DashboardTheme.borderRadius),
      ),
      child: const Center(
        child: CircularProgressIndicator(
          color: DashboardTheme.royalBlue,
        ),
      ),
    );
  }

  Widget _buildErrorChart() {
    return Container(
      decoration: BoxDecoration(
        color: DashboardTheme.error.withOpacity(0.1),
        borderRadius: BorderRadius.circular(DashboardTheme.borderRadius),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.error_outline,
              color: DashboardTheme.error,
              size: 32,
            ),
            const SizedBox(height: DashboardTheme.spacing8),
            Text(
              'Erreur de chargement',
              style: DashboardTheme.bodyMedium.copyWith(
                color: DashboardTheme.error,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildEmptyChart() {
    return Container(
      decoration: BoxDecoration(
        color: DashboardTheme.grey50,
        borderRadius: BorderRadius.circular(DashboardTheme.borderRadius),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.bar_chart,
              color: DashboardTheme.grey400,
              size: 32,
            ),
            const SizedBox(height: DashboardTheme.spacing8),
            Text(
              'Aucune donnée',
              style: DashboardTheme.bodyMedium.copyWith(
                color: DashboardTheme.grey500,
              ),
            ),
          ],
        ),
      ),
    );
  }

  IconData _getChartIcon() {
    switch (chartType) {
      case DashboardChartType.memberActivity:
        return Icons.pie_chart;
      case DashboardChartType.contributionTrend:
        return Icons.trending_up;
      case DashboardChartType.eventParticipation:
        return Icons.bar_chart;
      case DashboardChartType.monthlyGrowth:
        return Icons.show_chart;
    }
  }
}

enum DashboardChartType {
  memberActivity,
  contributionTrend,
  eventParticipation,
  monthlyGrowth,
}
