import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../widgets/connected/connected_stats_card.dart';
import '../widgets/connected/connected_recent_activities.dart';
import '../widgets/connected/connected_upcoming_events.dart';
import '../widgets/charts/dashboard_chart_widget.dart';
import '../widgets/metrics/real_time_metrics_widget.dart';
import '../widgets/notifications/dashboard_notifications_widget.dart';
import '../bloc/dashboard_bloc.dart';
import '../../../../shared/design_system/unionflow_design_system.dart';
import '../../../../shared/widgets/core_card.dart';
import '../../../../core/di/injection_container.dart';
import '../../../settings/presentation/pages/system_settings_page.dart';

/// Page dashboard avancée avec graphiques et analytics
class AdvancedDashboardPage extends StatefulWidget {
  final String organizationId;
  final String userId;

  const AdvancedDashboardPage({
    super.key,
    required this.organizationId,
    required this.userId,
  });

  @override
  State<AdvancedDashboardPage> createState() => _AdvancedDashboardPageState();
}

class _AdvancedDashboardPageState extends State<AdvancedDashboardPage>
    with TickerProviderStateMixin {
  late DashboardBloc _dashboardBloc;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _dashboardBloc = sl<DashboardBloc>();
    _tabController = TabController(length: 3, vsync: this);
    _loadDashboardData();
  }

  void _loadDashboardData() {
    _dashboardBloc.add(LoadDashboardData(
      organizationId: widget.organizationId,
      userId: widget.userId,
    ));
  }

  void _refreshDashboardData() {
    _dashboardBloc.add(RefreshDashboardData(
      organizationId: widget.organizationId,
      userId: widget.userId,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => _dashboardBloc,
      child: Scaffold(
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        appBar: const UFAppBar(
          title: 'DASHBOARD AVANCÉ',
        ),
        body: Column(
          children: [
              _buildTabBar(),
              Expanded(
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    _buildOverviewTab(),
                    _buildAnalyticsTab(),
                    _buildReportsTab(),
                  ],
                ),
              ),
            ],
          ),
        floatingActionButton: _buildFloatingActionButton(),
      ),
    );
  }

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [AppColors.primary, AppColors.primaryDark],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Row(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(12),
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(0.2),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: const Icon(
                          Icons.dashboard_outlined,
                          color: Colors.white,
                          size: 32,
                        ),
                      ),
                      const SizedBox(width: 16),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'DASHBOARD AVANCÉ',
                              style: AppTypography.headerSmall.copyWith(
                                color: Colors.white,
                                fontSize: 24,
                                fontWeight: FontWeight.bold,
                                letterSpacing: 1.2,
                              ),
                            ),
                            const SizedBox(height: 4),
                            Text(
                              'ANALYTICS & INSIGHTS',
                              style: AppTypography.subtitleSmall.copyWith(
                                color: Colors.white.withOpacity(0.9),
                                fontWeight: FontWeight.w500,
                                letterSpacing: 1.1,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 8),
                  BlocBuilder<DashboardBloc, DashboardState>(
                    builder: (context, state) {
                      if (state is DashboardLoaded || state is DashboardRefreshing) {
                        final data = state is DashboardLoaded 
                            ? state.dashboardData 
                            : (state as DashboardRefreshing).dashboardData;
                        return Row(
                          children: [
                            _buildQuickStat(
                              'Membres',
                              '${data.stats.activeMembers}/${data.stats.totalMembers}',
                              Icons.people_outline,
                            ),
                            const SizedBox(width: 16),
                            _buildQuickStat(
                              'Événements',
                              '${data.stats.upcomingEvents}',
                              Icons.event_outlined,
                            ),
                            const SizedBox(width: 16),
                            _buildQuickStat(
                              'Croissance',
                              '${data.stats.monthlyGrowth.toStringAsFixed(1)}%',
                              Icons.trending_up,
                            ),
                          ],
                        );
                      }
                      return const SizedBox.shrink();
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      actions: [
        IconButton(
          onPressed: _refreshDashboardData,
          icon: const Icon(
            Icons.refresh_outlined,
            color: Colors.white,
          ),
        ),
        IconButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute<void>(
                builder: (_) => const SystemSettingsPage(),
              ),
            );
          },
          icon: const Icon(
            Icons.settings_outlined,
            color: Colors.white,
          ),
        ),
      ],
    );
  }

  Widget _buildQuickStat(String label, String value, IconData icon) {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 12,
        vertical: 8,
      ),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.15),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            color: Colors.white,
            size: 14,
          ),
          const SizedBox(width: 8),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                value,
                style: AppTypography.actionText.copyWith(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                ),
              ),
              Text(
                label.toUpperCase(),
                style: AppTypography.badgeText.copyWith(
                  color: Colors.white.withOpacity(0.8),
                  fontSize: 8,
                  letterSpacing: 0.5,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildTabBar() {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        border: Border(bottom: BorderSide(color: AppColors.border, width: 1)),
      ),
      child: TabBar(
        controller: _tabController,
        labelColor: AppColors.primary,
        unselectedLabelColor: AppColors.textSecondary,
        indicatorColor: AppColors.primary,
        indicatorWeight: 3,
        labelStyle: AppTypography.actionText.copyWith(fontSize: 10, fontWeight: FontWeight.bold, letterSpacing: 1),
        tabs: const [
          Tab(text: 'VUE D\'ENSEMBLE'),
          Tab(text: 'ANALYTICS'),
          Tab(text: 'RAPPORTS'),
        ],
      ),
    );
  }

  Widget _buildOverviewTab() {
    return RefreshIndicator(
      onRefresh: () async => _refreshDashboardData(),
      color: AppColors.primary,
      child: SingleChildScrollView(
        padding: const EdgeInsets.all(12),
        child: Column(
          children: [
            // Métriques temps réel
            RealTimeMetricsWidget(
              organizationId: widget.organizationId,
              userId: widget.userId,
            ),
            const SizedBox(height: 8),

            // Grille de statistiques
            _buildStatsGrid(),
            const SizedBox(height: 8),

            // Notifications
            const DashboardNotificationsWidget(maxNotifications: 3),
            const SizedBox(height: 8),

            // Activités et événements
            const Row(
              children: [
                Expanded(
                  child: ConnectedRecentActivities(maxItems: 3),
                ),
                SizedBox(width: 16),
                Expanded(
                  child: ConnectedUpcomingEvents(maxItems: 2),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildAnalyticsTab() {
    return const SingleChildScrollView(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: DashboardChartWidget(
                  title: 'Activité des Membres',
                  chartType: DashboardChartType.memberActivity,
                  height: 250,
                ),
              ),
              SizedBox(width: 12),
              Expanded(
                child: DashboardChartWidget(
                  title: 'Croissance Mensuelle',
                  chartType: DashboardChartType.monthlyGrowth,
                  height: 250,
                ),
              ),
            ],
          ),
          SizedBox(height: 16),
          DashboardChartWidget(
            title: 'Tendance des Contributions',
            chartType: DashboardChartType.contributionTrend,
            height: 300,
          ),
          SizedBox(height: 16),
          DashboardChartWidget(
            title: 'Participation aux Événements',
            chartType: DashboardChartType.eventParticipation,
            height: 250,
          ),
        ],
      ),
    );
  }

  Widget _buildReportsTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(12),
      child: Column(
        children: [
          _buildReportCard(
            'Rapport Mensuel',
            'Synthèse complète des activités du mois',
            Icons.calendar_month_outlined,
            AppColors.primary,
          ),
          const SizedBox(height: 12),
          _buildReportCard(
            'Rapport Financier',
            'État des contributions et finances',
            Icons.account_balance_wallet_outlined,
            AppColors.success,
          ),
          const SizedBox(height: 12),
          _buildReportCard(
            'Rapport d\'Activité',
            'Analyse de l\'engagement des membres',
            Icons.trending_up,
            AppColors.info,
          ),
          const SizedBox(height: 12),
          _buildReportCard(
            'Rapport Événements',
            'Statistiques des événements organisés',
            Icons.event_note_outlined,
            AppColors.warning,
          ),
        ],
      ),
    );
  }

  Widget _buildStatsGrid() {
    return GridView.count(
      crossAxisCount: 2,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisSpacing: 12,
      mainAxisSpacing: 12,
      childAspectRatio: 2.0,
      children: [
        ConnectedStatsCard(
          title: 'Membres',
          icon: Icons.people_outline,
          valueExtractor: (stats) => stats.totalMembers.toString(),
          subtitleExtractor: (stats) => '${stats.activeMembers} actifs',
        ),
        ConnectedStatsCard(
          title: 'Finances',
          icon: Icons.account_balance_wallet_outlined,
          valueExtractor: (stats) => stats.formattedContributionAmount,
          subtitleExtractor: (stats) => '${stats.totalContributions} versements',
          customColor: AppColors.success,
        ),
        ConnectedStatsCard(
          title: 'Événements',
          icon: Icons.event_outlined,
          valueExtractor: (stats) => stats.totalEvents.toString(),
          subtitleExtractor: (stats) => '${stats.upcomingEvents} à venir',
          customColor: AppColors.info,
        ),
        ConnectedStatsCard(
          title: 'Engagement',
          icon: Icons.star_outline,
          valueExtractor: (stats) => '${(stats.engagementRate * 100).toStringAsFixed(0)}%',
          subtitleExtractor: (stats) => stats.isHighEngagement ? 'Excellent' : 'Stable',
          customColor: AppColors.warning,
        ),
      ],
    );
  }

  Widget _buildReportCard(String title, String description, IconData icon, Color color) {
    return CoreCard(
      padding: const EdgeInsets.all(12),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: color.withOpacity(0.1),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(icon, color: color, size: 20),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title, style: AppTypography.actionText.copyWith(fontSize: 12)),
                Text(description, style: AppTypography.subtitleSmall.copyWith(fontSize: 10)),
              ],
            ),
          ),
          const Icon(Icons.download_outlined, color: AppColors.textSecondary, size: 18),
        ],
      ),
    );
  }

  Widget _buildFloatingActionButton() {
    return FloatingActionButton(
      onPressed: () {
        // Actions rapides
      },
      backgroundColor: AppColors.primary,
      child: const Icon(Icons.add, color: Colors.white),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    _dashboardBloc.close();
    super.dispose();
  }
}