import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import '../../../../core/constants/app_constants.dart';
import '../../../../shared/design_system/unionflow_design_v2.dart';
import '../../../../shared/design_system/components/uf_app_bar.dart';
import '../../../authentication/data/models/user_role.dart';
import '../../../authentication/presentation/bloc/auth_bloc.dart';
import '../../bloc/evenements_bloc.dart';
import '../../bloc/evenements_event.dart';
import '../../data/models/evenement_model.dart';
import 'event_detail_page.dart';

/// Page Événements - Design UnionFlow
class EventsPageWithData extends StatefulWidget {
  final List<EvenementModel> events;
  final int totalCount;
  final int currentPage;
  final int totalPages;
  final void Function(String? query)? onSearch;
  final VoidCallback? onAddEvent;
  final void Function(int page, String? recherche)? onPageChanged;

  const EventsPageWithData({
    super.key,
    required this.events,
    required this.totalCount,
    required this.currentPage,
    required this.totalPages,
    this.onSearch,
    this.onAddEvent,
    this.onPageChanged,
  });

  @override
  State<EventsPageWithData> createState() => _EventsPageWithDataState();
}

class _EventsPageWithDataState extends State<EventsPageWithData> with TickerProviderStateMixin {
  final TextEditingController _searchController = TextEditingController();
  late TabController _tabController;
  String _searchQuery = '';
  Timer? _searchDebounce;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  void dispose() {
    _searchDebounce?.cancel();
    _searchController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        if (state is! AuthAuthenticated) {
          return const Scaffold(body: Center(child: CircularProgressIndicator()));
        }

        final canManageEvents = state.effectiveRole.level >= UserRole.moderator.level;

        return Scaffold(
          backgroundColor: UnionFlowColors.background,
          appBar: UFAppBar(
            title: 'Événements',
            backgroundColor: UnionFlowColors.surface,
            foregroundColor: UnionFlowColors.textPrimary,
            actions: [
              if (canManageEvents && widget.onAddEvent != null)
                IconButton(
                  icon: const Icon(Icons.add_circle_outline),
                  color: UnionFlowColors.unionGreen,
                  onPressed: widget.onAddEvent,
                  tooltip: 'Créer un événement',
                ),
              const SizedBox(width: 8),
            ],
          ),
          body: Column(
            children: [
              _buildHeader(),
              _buildSearchBar(),
              _buildTabs(),
              Expanded(
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    _buildEventsList(widget.events, 'tous'),
                    _buildEventsList(widget.events.where((e) => e.estAVenir).toList(), 'à venir'),
                    _buildEventsList(widget.events.where((e) => e.estEnCours).toList(), 'en cours'),
                    _buildEventsList(widget.events.where((e) => e.estPasse).toList(), 'passés'),
                  ],
                ),
              ),
              if (widget.totalPages > 1) _buildPagination(),
            ],
          ),
        );
      },
    );
  }

  Widget _buildHeader() {
    final upcoming = widget.events.where((e) => e.estAVenir).length;
    final ongoing = widget.events.where((e) => e.estEnCours).length;
    final total = widget.totalCount;

    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: UnionFlowColors.surface,
        border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
      ),
      child: Row(
        children: [
          Expanded(child: _buildStatCard(Icons.event_available, 'À venir', upcoming.toString(), UnionFlowColors.success)),
          const SizedBox(width: 12),
          Expanded(child: _buildStatCard(Icons.play_circle_outline, 'En cours', ongoing.toString(), UnionFlowColors.amber)),
          const SizedBox(width: 12),
          Expanded(child: _buildStatCard(Icons.calendar_today, 'Total', total.toString(), UnionFlowColors.unionGreen)),
        ],
      ),
    );
  }

  Widget _buildStatCard(IconData icon, String label, String value, Color color) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: color.withOpacity(0.3), width: 1),
      ),
      child: Column(
        children: [
          Icon(icon, size: 20, color: color),
          const SizedBox(height: 6),
          Text(value, style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: color)),
          const SizedBox(height: 2),
          Text(label, style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: color), textAlign: TextAlign.center),
        ],
      ),
    );
  }

  Widget _buildSearchBar() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: UnionFlowColors.surface,
        border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
      ),
      child: TextField(
        controller: _searchController,
        onChanged: (v) {
          setState(() => _searchQuery = v);
          _searchDebounce?.cancel();
          _searchDebounce = Timer(AppConstants.searchDebounce, () {
            widget.onSearch?.call(v.isEmpty ? null : v);
          });
        },
        style: const TextStyle(fontSize: 14, color: UnionFlowColors.textPrimary),
        decoration: InputDecoration(
          hintText: 'Rechercher un événement...',
          hintStyle: const TextStyle(fontSize: 13, color: UnionFlowColors.textTertiary),
          prefixIcon: const Icon(Icons.search, size: 20, color: UnionFlowColors.textSecondary),
          suffixIcon: _searchQuery.isNotEmpty
              ? IconButton(
                  icon: const Icon(Icons.clear, size: 18, color: UnionFlowColors.textSecondary),
                  onPressed: () {
                    _searchDebounce?.cancel();
                    _searchController.clear();
                    setState(() => _searchQuery = '');
                    widget.onSearch?.call(null);
                  },
                )
              : null,
          contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: UnionFlowColors.border.withOpacity(0.3))),
          enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: UnionFlowColors.border.withOpacity(0.3))),
          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: UnionFlowColors.unionGreen, width: 1.5)),
          filled: true,
          fillColor: UnionFlowColors.surfaceVariant.withOpacity(0.3),
        ),
      ),
    );
  }

  Widget _buildTabs() {
    return Container(
      decoration: BoxDecoration(
        color: UnionFlowColors.surface,
        border: Border(bottom: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
      ),
      child: TabBar(
        controller: _tabController,
        labelColor: UnionFlowColors.unionGreen,
        unselectedLabelColor: UnionFlowColors.textSecondary,
        indicatorColor: UnionFlowColors.unionGreen,
        indicatorWeight: 3,
        labelStyle: const TextStyle(fontSize: 13, fontWeight: FontWeight.w700),
        unselectedLabelStyle: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
        tabs: const [Tab(text: 'Tous'), Tab(text: 'À venir'), Tab(text: 'En cours'), Tab(text: 'Passés')],
      ),
    );
  }

  Widget _buildEventsList(List<EvenementModel> events, String type) {
    final filtered = _searchQuery.isEmpty
        ? events
        : events.where((e) => e.titre.toLowerCase().contains(_searchQuery.toLowerCase()) || (e.lieu?.toLowerCase().contains(_searchQuery.toLowerCase()) ?? false)).toList();

    if (filtered.isEmpty) return _buildEmptyState(type);

    return RefreshIndicator(
      onRefresh: () async => context.read<EvenementsBloc>().add(const LoadEvenements()),
      color: UnionFlowColors.unionGreen,
      child: ListView.separated(
        padding: const EdgeInsets.all(16),
        itemCount: filtered.length,
        separatorBuilder: (_, __) => const SizedBox(height: 12),
        itemBuilder: (context, index) => _buildEventCard(filtered[index]),
      ),
    );
  }

  Widget _buildEventCard(EvenementModel event) {
    final df = DateFormat('dd MMM yyyy, HH:mm');

    return GestureDetector(
      onTap: () => _showEventDetails(event),
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: UnionFlowColors.surface,
          borderRadius: BorderRadius.circular(16),
          boxShadow: UnionFlowColors.softShadow,
          border: Border(left: BorderSide(color: _getStatutColor(event.statut), width: 4)),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                _buildBadge(_mapStatut(event.statut), _getStatutColor(event.statut)),
                const SizedBox(width: 8),
                _buildBadge(_mapType(event.type), UnionFlowColors.textSecondary),
                const Spacer(),
                const Icon(Icons.chevron_right, size: 18, color: UnionFlowColors.textTertiary),
              ],
            ),
            const SizedBox(height: 12),
            Text(event.titre, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: UnionFlowColors.textPrimary), maxLines: 2, overflow: TextOverflow.ellipsis),
            const SizedBox(height: 12),
            Row(
              children: [
                const Icon(Icons.access_time, size: 14, color: UnionFlowColors.textSecondary),
                const SizedBox(width: 6),
                Text(df.format(event.dateDebut), style: const TextStyle(fontSize: 12, color: UnionFlowColors.textSecondary)),
              ],
            ),
            if (event.lieu != null) ...[
              const SizedBox(height: 6),
              Row(
                children: [
                  const Icon(Icons.location_on_outlined, size: 14, color: UnionFlowColors.textSecondary),
                  const SizedBox(width: 6),
                  Expanded(child: Text(event.lieu!, style: const TextStyle(fontSize: 12, color: UnionFlowColors.textSecondary), maxLines: 1, overflow: TextOverflow.ellipsis)),
                ],
              ),
            ],
            const SizedBox(height: 12),
            Row(
              children: [
                Container(
                  width: 24,
                  height: 24,
                  decoration: const BoxDecoration(gradient: UnionFlowColors.primaryGradient, shape: BoxShape.circle),
                  alignment: Alignment.center,
                  child: Text(event.organisateurNom?[0] ?? 'O', style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 12)),
                ),
                const SizedBox(width: 8),
                Expanded(child: Text(event.organisateurNom ?? 'Organisateur', style: const TextStyle(fontSize: 11, color: UnionFlowColors.textSecondary), maxLines: 1, overflow: TextOverflow.ellipsis)),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    color: UnionFlowColors.goldPale,
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: UnionFlowColors.gold.withOpacity(0.3), width: 1),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Icon(Icons.people_outline, size: 12, color: UnionFlowColors.gold),
                      const SizedBox(width: 4),
                      Text('${event.participantsActuels}/${event.maxParticipants ?? "∞"}', style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w600, color: UnionFlowColors.gold)),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildBadge(String text, Color color) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: color.withOpacity(0.3), width: 1),
      ),
      child: Text(text, style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: color)),
    );
  }

  Widget _buildEmptyState(String type) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            padding: const EdgeInsets.all(24),
            decoration: const BoxDecoration(color: UnionFlowColors.goldPale, shape: BoxShape.circle),
            child: const Icon(Icons.event_busy, size: 64, color: UnionFlowColors.gold),
          ),
          const SizedBox(height: 24),
          Text('Aucun événement $type', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: UnionFlowColors.textPrimary)),
          const SizedBox(height: 8),
          Text(_searchQuery.isEmpty ? 'La liste est vide pour le moment' : 'Essayez une autre recherche', style: const TextStyle(fontSize: 13, color: UnionFlowColors.textSecondary)),
        ],
      ),
    );
  }

  Widget _buildPagination() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 12),
      decoration: BoxDecoration(
        color: UnionFlowColors.surface,
        border: Border(top: BorderSide(color: UnionFlowColors.border.withOpacity(0.5), width: 1)),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: const Icon(Icons.chevron_left, size: 24),
            color: widget.currentPage > 0 ? UnionFlowColors.unionGreen : UnionFlowColors.textTertiary,
            onPressed: widget.currentPage > 0 && widget.onPageChanged != null
                ? () => widget.onPageChanged!(widget.currentPage - 1, _searchQuery.isEmpty ? null : _searchQuery)
                : null,
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            decoration: BoxDecoration(gradient: UnionFlowColors.primaryGradient, borderRadius: BorderRadius.circular(20)),
            child: Text('Page ${widget.currentPage + 1} / ${widget.totalPages}', style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.white)),
          ),
          IconButton(
            icon: const Icon(Icons.chevron_right, size: 24),
            color: widget.currentPage < widget.totalPages - 1 ? UnionFlowColors.unionGreen : UnionFlowColors.textTertiary,
            onPressed: widget.currentPage < widget.totalPages - 1 && widget.onPageChanged != null
                ? () => widget.onPageChanged!(widget.currentPage + 1, _searchQuery.isEmpty ? null : _searchQuery)
                : null,
          ),
        ],
      ),
    );
  }

  String _mapStatut(StatutEvenement s) {
    switch (s) {
      case StatutEvenement.planifie:
        return 'Planifié';
      case StatutEvenement.confirme:
        return 'Confirmé';
      case StatutEvenement.enCours:
        return 'En cours';
      case StatutEvenement.termine:
        return 'Terminé';
      case StatutEvenement.annule:
        return 'Annulé';
      case StatutEvenement.reporte:
        return 'Reporté';
    }
  }

  Color _getStatutColor(StatutEvenement s) {
    switch (s) {
      case StatutEvenement.planifie:
        return UnionFlowColors.info;
      case StatutEvenement.confirme:
        return UnionFlowColors.success;
      case StatutEvenement.enCours:
        return UnionFlowColors.amber;
      case StatutEvenement.termine:
        return UnionFlowColors.textSecondary;
      case StatutEvenement.annule:
        return UnionFlowColors.error;
      case StatutEvenement.reporte:
        return UnionFlowColors.warning;
    }
  }

  String _mapType(TypeEvenement t) {
    switch (t) {
      case TypeEvenement.assembleeGenerale:
        return 'AG';
      case TypeEvenement.reunion:
        return 'Réunion';
      case TypeEvenement.formation:
        return 'Formation';
      case TypeEvenement.conference:
        return 'Conférence';
      case TypeEvenement.atelier:
        return 'Atelier';
      case TypeEvenement.seminaire:
        return 'Séminaire';
      case TypeEvenement.evenementSocial:
        return 'Social';
      case TypeEvenement.manifestation:
        return 'Manif.';
      case TypeEvenement.celebration:
        return 'Célébr.';
      case TypeEvenement.autre:
        return 'Autre';
    }
  }

  void _showEventDetails(EvenementModel event) {
    final bloc = context.read<EvenementsBloc>();
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (_) => BlocProvider.value(
          value: bloc,
          child: EventDetailPage(evenement: event),
        ),
      ),
    );
  }
}