import 'package:flutter/material.dart';
import 'package:em2rp/utils/colors.dart';
import 'package:em2rp/views/widgets/data_management/event_types_management.dart';
import 'package:em2rp/views/widgets/data_management/options_management.dart';
import 'package:em2rp/views/widgets/nav/main_drawer.dart';
import 'package:em2rp/views/widgets/nav/custom_app_bar.dart';
import 'package:em2rp/utils/permission_gate.dart';
class DataManagementPage extends StatefulWidget {
  const DataManagementPage({super.key});

  @override
  State<DataManagementPage> createState() => _DataManagementPageState();
}

class _DataManagementPageState extends State<DataManagementPage> {
  int _selectedIndex = 0;

  final List<DataCategory> _categories = [
    DataCategory(
      title: 'Types d\'événements',
      icon: Icons.category,
      widget: const EventTypesManagement(),
    ),
    DataCategory(
      title: 'Options',
      icon: Icons.tune,
      widget: const OptionsManagement(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final isMobile = MediaQuery.of(context).size.width < 800;

    return PermissionGate(
      requiredPermissions: const ['view_all_users'],
      fallback: const Scaffold(
        appBar: CustomAppBar(
          title: 'Accès refusé',
        ),
        body: Center(
          child: Text(
            'Vous n\'avez pas les permissions nécessaires pour accéder à cette page.',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 16),
          ),
        ),
      ),
      child: Scaffold(
      appBar: CustomAppBar(title: 'Gestion des données'),
      drawer: const MainDrawer(currentPage: '/data_management'), // Ajout du drawer
      body: isMobile ? _buildMobileLayout() : _buildDesktopLayout(),
    ),
    );
  }

  Widget _buildMobileLayout() {
    return PermissionGate(
      requiredPermissions: const ['view_all_users'],
      fallback: const Scaffold(
        appBar: CustomAppBar(
          title: 'Accès refusé',
        ),
        body: Center(
          child: Text(
            'Vous n\'avez pas les permissions nécessaires pour accéder à cette page.',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 16),
          ),
        ),
      ),
      child: Column(
      children: [
        // Menu horizontal en mobile
        Container(
          height: 60,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: _categories.length,
            itemBuilder: (context, index) {
              final isSelected = index == _selectedIndex;
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4.0),
                child: ChoiceChip(
                  label: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(
                        _categories[index].icon,
                        size: 16,
                        color: isSelected ? Colors.white : AppColors.rouge,
                      ),
                      const SizedBox(width: 8),
                      Text(_categories[index].title),
                    ],
                  ),
                  selected: isSelected,
                  onSelected: (selected) {
                    if (selected) {
                      setState(() => _selectedIndex = index);
                    }
                  },
                  selectedColor: AppColors.rouge,
                  labelStyle: TextStyle(
                    color: isSelected ? Colors.white : AppColors.rouge,
                    fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                  ),
                ),
              );
            },
          ),
        ),
        const Divider(),
        // Contenu
        Expanded(
          child: _categories[_selectedIndex].widget,
        ),
      ],
      )
    );
  }

  Widget _buildDesktopLayout() {
    return Row(
      children: [
        // Sidebar gauche
        Container(
          width: 280,
          decoration: BoxDecoration(
            color: Colors.grey[100],
            border: const Border(
              right: BorderSide(color: Colors.grey, width: 1),
            ),
          ),
          child: Column(
            children: [
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: AppColors.rouge.withOpacity(0.1),
                ),
                child: Row(
                  children: [
                    Icon(Icons.settings, color: AppColors.rouge),
                    const SizedBox(width: 12),
                    Text(
                      'Catégories de données',
                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.bold,
                        color: AppColors.rouge,
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: _categories.length,
                  itemBuilder: (context, index) {
                    final isSelected = index == _selectedIndex;
                    return ListTile(
                      leading: Icon(
                        _categories[index].icon,
                        color: isSelected ? AppColors.rouge : Colors.grey[600],
                      ),
                      title: Text(
                        _categories[index].title,
                        style: TextStyle(
                          color: isSelected ? AppColors.rouge : Colors.black87,
                          fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                        ),
                      ),
                      selected: isSelected,
                      selectedTileColor: AppColors.rouge.withOpacity(0.1),
                      onTap: () => setState(() => _selectedIndex = index),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
        // Contenu principal
        Expanded(
          child: _categories[_selectedIndex].widget,
        ),
      ],
    );
  }
}

class DataCategory {
  final String title;
  final IconData icon;
  final Widget widget;

  DataCategory({
    required this.title,
    required this.icon,
    required this.widget,
  });
}