import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../bloc/organizations_bloc.dart';
import '../../bloc/organizations_event.dart';
import '../../bloc/organizations_state.dart';

/// Page de gestion des organisations - Interface sophistiquée et exhaustive
///
/// Cette page offre une interface complète pour la gestion des organisations
/// avec des fonctionnalités avancées de recherche, filtrage, statistiques
/// et actions de gestion basées sur les permissions utilisateur.
class OrganizationsPage extends StatefulWidget {
  const OrganizationsPage({super.key});

  @override
  State<OrganizationsPage> createState() => _OrganizationsPageState();
}

class _OrganizationsPageState extends State<OrganizationsPage> with TickerProviderStateMixin {
  // Controllers et état
  final TextEditingController _searchController = TextEditingController();
  late TabController _tabController;

  // État de l'interface
  String _searchQuery = '';

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
    // Charger les organisations au démarrage
    context.read<OrganizationsBloc>().add(const LoadOrganizations());
  }

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

  // Données de démonstration enrichies
  final List<Map<String, dynamic>> _allOrganisations = [
    {
      'id': '1',
      'nom': 'Syndicat des Travailleurs Unis',
      'description': 'Organisation syndicale représentant les travailleurs de l\'industrie',
      'type': 'Syndicat',
      'secteurActivite': 'Industrie',
      'status': 'Active',
      'dateCreation': DateTime(2020, 3, 15),
      'dateModification': DateTime(2024, 9, 19),
      'nombreMembres': 1250,
      'adresse': '123 Rue de la République, Paris',
      'telephone': '+33 1 23 45 67 89',
      'email': 'contact@stu.org',
      'siteWeb': 'https://www.stu.org',
      'logo': null,
      'budget': 850000,
      'projetsActifs': 8,
      'evenementsAnnuels': 24,
    },
    {
      'id': '2',
      'nom': 'Fédération Nationale des Employés',
      'description': 'Fédération regroupant plusieurs syndicats d\'employés',
      'type': 'Fédération',
      'secteurActivite': 'Services',
      'status': 'Active',
      'dateCreation': DateTime(2018, 7, 22),
      'dateModification': DateTime(2024, 9, 18),
      'nombreMembres': 3500,
      'adresse': '456 Avenue des Champs, Lyon',
      'telephone': '+33 4 56 78 90 12',
      'email': 'info@fne.org',
      'siteWeb': 'https://www.fne.org',
      'logo': null,
      'budget': 2100000,
      'projetsActifs': 15,
      'evenementsAnnuels': 36,
    },
    {
      'id': '3',
      'nom': 'Union des Artisans',
      'description': 'Union représentant les artisans et petites entreprises',
      'type': 'Union',
      'secteurActivite': 'Artisanat',
      'status': 'Active',
      'dateCreation': DateTime(2019, 11, 8),
      'dateModification': DateTime(2024, 9, 15),
      'nombreMembres': 890,
      'adresse': '789 Place du Marché, Marseille',
      'telephone': '+33 4 91 23 45 67',
      'email': 'contact@unionartisans.org',
      'siteWeb': 'https://www.unionartisans.org',
      'logo': null,
      'budget': 450000,
      'projetsActifs': 5,
      'evenementsAnnuels': 18,
    },
  ];

  // Filtrage des organisations
  List<Map<String, dynamic>> get _filteredOrganisations {
    var organisations = _allOrganisations;

    // Filtrage par recherche
    if (_searchQuery.isNotEmpty) {
      final query = _searchQuery.toLowerCase();
      organisations = organisations.where((org) =>
          org['nom'].toString().toLowerCase().contains(query) ||
          org['description'].toString().toLowerCase().contains(query) ||
          org['secteurActivite'].toString().toLowerCase().contains(query) ||
          org['type'].toString().toLowerCase().contains(query)).toList();
    }

    // Le filtrage par type est maintenant géré par les onglets

    return organisations;
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<OrganizationsBloc, OrganizationsState>(
      listener: (context, state) {
        // Gestion des erreurs avec SnackBar
        if (state is OrganizationsError) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(state.message),
              backgroundColor: Colors.red,
              duration: const Duration(seconds: 4),
              action: SnackBarAction(
                label: 'Réessayer',
                textColor: Colors.white,
                onPressed: () {
                  context.read<OrganizationsBloc>().add(const LoadOrganizations());
                },
              ),
            ),
          );
        }
      },
      child: Scaffold(
        backgroundColor: const Color(0xFFF8F9FA),
        body: SingleChildScrollView(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Header épuré sans statistiques
            _buildCleanHeader(),
            const SizedBox(height: 16),

            // Section statistiques dédiée
            _buildStatsSection(),
            const SizedBox(height: 16),

            // Barre de recherche et filtres
            _buildSearchAndFilters(),
            const SizedBox(height: 16),

            // Onglets de catégories
            _buildCategoryTabs(),
            const SizedBox(height: 16),

            // Liste des organisations
            _buildOrganisationsDisplay(),

            const SizedBox(height: 80), // Espace pour le FAB
          ],
        ),
      ),
      floatingActionButton: _buildActionButton(),
      ),
    );
  }

  /// Bouton d'action harmonisé
  Widget _buildActionButton() {
    return FloatingActionButton.extended(
      onPressed: () => _showCreateOrganisationDialog(),
      backgroundColor: const Color(0xFF6C5CE7),
      elevation: 8,
      icon: const Icon(Icons.add, color: Colors.white),
      label: const Text(
        'Nouvelle organisation',
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }

  /// Header épuré et cohérent avec le design system
  Widget _buildCleanHeader() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF6C5CE7), Color(0xFF5A4FCF)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF6C5CE7).withOpacity(0.3),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(12),
            ),
            child: const Icon(
              Icons.business,
              color: Colors.white,
              size: 24,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Gestion des Organisations',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                Text(
                  'Interface complète de gestion des organisations',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white.withOpacity(0.8),
                  ),
                ),
              ],
            ),
          ),
          _buildHeaderActions(),
        ],
      ),
    );
  }

  /// Section statistiques dédiée et harmonisée
  Widget _buildStatsSection() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(
                Icons.analytics_outlined,
                color: Colors.grey[600],
                size: 20,
              ),
              const SizedBox(width: 8),
              Text(
                'Statistiques',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: Colors.grey[800],
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: _buildStatCard(
                  'Total',
                  '${_allOrganisations.length}',
                  Icons.business_outlined,
                  const Color(0xFF6C5CE7),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: _buildStatCard(
                  'Actives',
                  '${_allOrganisations.where((o) => o['status'] == 'Active').length}',
                  Icons.check_circle_outline,
                  const Color(0xFF00B894),
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: _buildStatCard(
                  'Membres',
                  '${_allOrganisations.fold<int>(0, (sum, o) => sum + (o['nombreMembres'] as int))}',
                  Icons.people_outline,
                  const Color(0xFF0984E3),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  /// Actions du header
  Widget _buildHeaderActions() {
    return Row(
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.2),
            borderRadius: BorderRadius.circular(8),
          ),
          child: IconButton(
            onPressed: () => _showNotifications(),
            icon: const Icon(Icons.notifications_outlined, color: Colors.white),
            tooltip: 'Notifications',
          ),
        ),
        const SizedBox(width: 8),
        Container(
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.2),
            borderRadius: BorderRadius.circular(8),
          ),
          child: IconButton(
            onPressed: () => _showSettings(),
            icon: const Icon(Icons.settings_outlined, color: Colors.white),
            tooltip: 'Paramètres',
          ),
        ),
      ],
    );
  }



  /// Carte de statistique harmonisée
  Widget _buildStatCard(String label, String value, IconData icon, Color color) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: color.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: color.withOpacity(0.1),
          width: 1,
        ),
      ),
      child: Column(
        children: [
          Icon(icon, color: color, size: 20),
          const SizedBox(height: 8),
          Text(
            value,
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.grey[800],
            ),
          ),
          Text(
            label,
            style: TextStyle(
              fontSize: 12,
              color: Colors.grey[600],
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }

  /// Onglets de catégories harmonisés
  Widget _buildCategoryTabs() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: TabBar(
        controller: _tabController,
        labelColor: const Color(0xFF6C5CE7),
        unselectedLabelColor: Colors.grey[600],
        indicatorColor: const Color(0xFF6C5CE7),
        indicatorWeight: 3,
        indicatorSize: TabBarIndicatorSize.tab,
        labelStyle: const TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 14,
        ),
        unselectedLabelStyle: const TextStyle(
          fontWeight: FontWeight.normal,
          fontSize: 14,
        ),
        tabs: const [
          Tab(text: 'Toutes'),
          Tab(text: 'Syndicats'),
          Tab(text: 'Fédérations'),
          Tab(text: 'Unions'),
        ],
      ),
    );
  }

  /// Affichage des organisations harmonisé
  Widget _buildOrganisationsDisplay() {
    return SizedBox(
      height: 600, // Hauteur fixe pour le TabBarView
      child: TabBarView(
        controller: _tabController,
        children: [
          _buildOrganisationsTab('Toutes'),
          _buildOrganisationsTab('Syndicat'),
          _buildOrganisationsTab('Fédération'),
          _buildOrganisationsTab('Union'),
        ],
      ),
    );
  }



  /// Onglet des organisations
  Widget _buildOrganisationsTab(String filter) {
    final organisations = filter == 'Toutes'
        ? _filteredOrganisations
        : _filteredOrganisations.where((o) => o['type'] == filter).toList();

    return Column(
      children: [
        // Barre de recherche et filtres
        _buildSearchAndFilters(),
        // Liste des organisations
        Expanded(
          child: organisations.isEmpty
              ? _buildEmptyState()
              : _buildOrganisationsList(organisations),
        ),
      ],
    );
  }

  /// Barre de recherche et filtres harmonisée
  Widget _buildSearchAndFilters() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Barre de recherche
          Container(
            decoration: BoxDecoration(
              color: Colors.grey[50],
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: Colors.grey[200]!,
                width: 1,
              ),
            ),
            child: TextField(
              controller: _searchController,
              onChanged: (value) {
                setState(() {
                  _searchQuery = value;
                });
              },
              decoration: InputDecoration(
                hintText: 'Rechercher par nom, type, secteur...',
                hintStyle: TextStyle(
                  color: Colors.grey[500],
                  fontSize: 14,
                ),
                prefixIcon: Icon(Icons.search, color: Colors.grey[400]),
                suffixIcon: _searchQuery.isNotEmpty
                    ? IconButton(
                        onPressed: () {
                          _searchController.clear();
                          setState(() {
                            _searchQuery = '';
                          });
                        },
                        icon: Icon(Icons.clear, color: Colors.grey[400]),
                      )
                    : null,
                border: InputBorder.none,
                contentPadding: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 12,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }



  /// Liste des organisations
  Widget _buildOrganisationsList(List<Map<String, dynamic>> organisations) {
    return RefreshIndicator(
      onRefresh: () async {
        // Recharger les organisations
        // Note: Cette page utilise des données passées en paramètre
        // Le rafraîchissement devrait être géré par le parent
        await Future.delayed(const Duration(milliseconds: 500));
      },
      child: ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: organisations.length,
        itemBuilder: (context, index) {
          final org = organisations[index];
          return _buildOrganisationCard(org);
        },
      ),
    );
  }

  /// Carte d'organisation
  Widget _buildOrganisationCard(Map<String, dynamic> org) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: InkWell(
        onTap: () => _showOrganisationDetails(org),
        borderRadius: BorderRadius.circular(12),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: const Color(0xFF6C5CE7).withOpacity(0.1),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: const Icon(
                      Icons.business,
                      color: Color(0xFF6C5CE7),
                      size: 20,
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          org['nom'],
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF1F2937),
                          ),
                        ),
                        const SizedBox(height: 2),
                        Text(
                          org['type'],
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.grey[600],
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                      color: org['status'] == 'Active' ? Colors.green.withOpacity(0.1) : Colors.orange.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Text(
                      org['status'],
                      style: TextStyle(
                        fontSize: 10,
                        fontWeight: FontWeight.w600,
                        color: org['status'] == 'Active' ? Colors.green[700] : Colors.orange[700],
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              Text(
                org['description'],
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey[700],
                  height: 1.4,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
              const SizedBox(height: 12),
              Row(
                children: [
                  _buildInfoChip(Icons.people, '${org['nombreMembres']} membres'),
                  const SizedBox(width: 8),
                  _buildInfoChip(Icons.work, org['secteurActivite']),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// Chip d'information
  Widget _buildInfoChip(IconData icon, String text) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 12, color: Colors.grey[600]),
          const SizedBox(width: 4),
          Text(
            text,
            style: TextStyle(
              fontSize: 11,
              color: Colors.grey[700],
              fontWeight: FontWeight.w500,
            ),
          ),
        ],
      ),
    );
  }

  /// État vide
  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.business_outlined,
            size: 64,
            color: Colors.grey[400],
          ),
          const SizedBox(height: 16),
          Text(
            'Aucune organisation trouvée',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w600,
              color: Colors.grey[600],
            ),
          ),
          const SizedBox(height: 8),
          Text(
            'Essayez de modifier vos critères de recherche',
            style: TextStyle(
              fontSize: 14,
              color: Colors.grey[500],
            ),
          ),
        ],
      ),
    );
  }



  // Méthodes temporaires pour éviter les erreurs
  void _showNotifications() {}
  void _showSettings() {}
  void _showOrganisationDetails(Map<String, dynamic> org) {}
  void _showCreateOrganisationDialog() {}
}
