import 'package:flutter/material.dart';
import 'package:em2rp/models/user_model.dart';
import 'package:em2rp/views/widgets/user_management/user_multi_select_widget.dart';
import 'package:em2rp/views/widgets/inputs/dropzone_upload_widget.dart';

class EventStaffAndDocumentsSection extends StatelessWidget {
  final List<UserModel> allUsers;
  final List<String> selectedUserIds;
  final Function(List<String>) onUserSelectionChanged;
  final bool isLoadingUsers;
  final List<Map<String, String>> uploadedFiles;
  final Function(List<Map<String, String>>) onFilesChanged;
  final bool isLoading;
  final String? error;
  final String? success;
  final bool isMobile;
  final VoidCallback? onPickAndUploadFiles;

  const EventStaffAndDocumentsSection({
    super.key,
    required this.allUsers,
    required this.selectedUserIds,
    required this.onUserSelectionChanged,
    required this.isLoadingUsers,
    required this.uploadedFiles,
    required this.onFilesChanged,
    required this.isLoading,
    this.error,
    this.success,
    required this.isMobile,
    this.onPickAndUploadFiles,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('Personnel', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                  const SizedBox(height: 8),
                  UserMultiSelectWidget(
                    allUsers: allUsers,
                    selectedUserIds: selectedUserIds,
                    onChanged: onUserSelectionChanged,
                    isLoading: isLoadingUsers,
                  ),
                ],
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('Documents', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                  const SizedBox(height: 8),
                  if (isMobile)
                    _buildMobileDocumentUpload()
                  else
                    DropzoneUploadWidget(
                      uploadedFiles: uploadedFiles,
                      onFilesChanged: onFilesChanged,
                      isLoading: isLoading,
                      error: error,
                      success: success,
                    ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildMobileDocumentUpload() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ElevatedButton.icon(
          icon: const Icon(Icons.attach_file),
          label: const Text('Ajouter un fichier'),
          onPressed: isLoading ? null : onPickAndUploadFiles,
        ),
        const SizedBox(height: 8),
        ...uploadedFiles.map((file) => ListTile(
              dense: true,
              contentPadding: EdgeInsets.zero,
              leading: const Icon(Icons.insert_drive_file),
              title: Text(file['name'] ?? ''),
              trailing: IconButton(
                icon: const Icon(Icons.delete),
                onPressed: isLoading
                    ? null
                    : () {
                        final newFiles = List<Map<String, String>>.from(uploadedFiles);
                        newFiles.remove(file);
                        onFilesChanged(newFiles);
                      },
              ),
            )),
        if (error != null)
          Padding(
            padding: const EdgeInsets.only(top: 4.0),
            child: Text(error!, style: const TextStyle(color: Colors.red)),
          ),
        if (success != null)
          Padding(
            padding: const EdgeInsets.only(top: 4.0),
            child: Text(success!, style: const TextStyle(color: Colors.green)),
          ),
      ],
    );
  }
}
