import React, { useState, useEffect } from 'react';
import {
  fetchRegistrationFileGroups,
  createRegistrationSchoolFileTemplate,
} from '@/app/actions/registerFileGroupAction';
import logger from '@/utils/logger';
import MultiSelect from '@/components/Form/MultiSelect'; // Import du composant MultiSelect
import { useCsrfToken } from '@/context/CsrfContext';
import { useEstablishment } from '@/context/EstablishmentContext';
import Popup from '@/components/Popup';

export default function FileUploadDocuSeal({
  handleCreateSchoolFileMaster,
  handleEditSchoolFileMaster,
  fileToEdit = null,
  onSuccess,
}) {
  const [groups, setGroups] = useState([]);
  const [templateMaster, setTemplateMaster] = useState(null);
  const [uploadedFileName, setUploadedFileName] = useState('');
  const [selectedGroups, setSelectedGroups] = useState([]);
  const [popupVisible, setPopupVisible] = useState(false);
  const [popupMessage, setPopupMessage] = useState('');

  const { selectedEstablishmentId, user } = useEstablishment();

  useEffect(() => {
    fetchRegistrationFileGroups(selectedEstablishmentId).then((data) =>
      setGroups(data)
    );

    if (fileToEdit) {
      setUploadedFileName(fileToEdit.name || '');
      setSelectedGroups(fileToEdit.groups || []);
    }
  }, [fileToEdit]);

  useEffect(() => {
    if (!user && !user?.email) {
      return;
    }
  }, [fileToEdit]);

  const handleGroupChange = (selectedGroups) => {
    setSelectedGroups(selectedGroups);
  };

  const handleLoad = (detail) => {
    logger.debug('loading template id : ', detail);
    setTemplateMaster(detail);
  };

  const handleUpload = (detail) => {
    logger.debug('Uploaded file detail:', detail);
    setUploadedFileName(detail.name);
  };

  const handleChange = (detail) => {
    logger.debug(detail);
    setUploadedFileName(detail.name);
  };

  const handleSubmit = (data) => {
    // Vérifier si au moins un champ a la propriété "required" à true
    const hasRequiredField = data.fields.some(
      (field) => field.required === true
    );

    if (!hasRequiredField) {
      setPopupMessage('Veuillez définir au moins un champ comme requis.');
      setPopupVisible(true);
      return;
    }

    const is_required = data.fields.length > 0;
    if (fileToEdit) {
      logger.debug('Modification du template master:', templateMaster?.id);
      handleEditSchoolFileMaster({
        name: uploadedFileName,
        group_ids: selectedGroups.map((group) => group.id),
        id: templateMaster?.id,
        is_required: is_required,
      });
    } else {
      logger.debug('Création du template master:', templateMaster?.id);
      handleCreateSchoolFileMaster({
        name: uploadedFileName,
        group_ids: selectedGroups.map((group) => group.id),
        id: templateMaster?.id,
        is_required: is_required,
      });
    }
  };

  return (
    <div className="h-full flex flex-col mt-4 space-y-6">
      <Popup
        isOpen={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        onCancel={() => setPopupVisible(false)}
        uniqueConfirmButton={true}
      />
      {/* Contenu principal */}
      {selectedGroups.length === 0 ? (
        <div className="flex flex-col items-center justify-center h-full text-center space-y-6">
          {/* Description de l'étape */}
          <p className="text-gray-700 text-base font-medium mb-4">
            Étape 1 - Sélectionner au moins un dossier d&apos;inscription
          </p>

          {/* Section centrée pour la sélection des groupes */}
          <div className="bg-gray-50 p-8 rounded-lg shadow-md border border-gray-300 transform transition-transform hover:scale-105">
            <h3 className="font-headline text-xl font-semibold text-gray-800 mb-4 text-center">
              Dossiers d&apos;inscription
            </h3>
            <MultiSelect
              name="groups"
              label="Sélection dossier d'inscription"
              options={groups}
              selectedOptions={selectedGroups}
              onChange={handleGroupChange}
              errorMsg={null}
              className="bg-white rounded-md shadow-inner p-4"
            />
          </div>
        </div>
      ) : (
        <div className="grid grid-cols-10 gap-6 items-start">
          {/* Section Dossiers d'inscription repositionnée sur le côté */}
          <div className="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
            <h3 className="font-headline text-lg font-medium text-gray-800 mb-4">
              Dossiers d&apos;inscription
            </h3>
            <MultiSelect
              name="groups"
              label="Sélection dossier d'inscription"
              options={groups}
              selectedOptions={selectedGroups}
              onChange={handleGroupChange}
              errorMsg={null}
            />
          </div>

          {/* Zone de configuration des documents */}
          <div className="col-span-8 bg-white p-6 rounded-lg shadow-md border border-gray-200">
            
          </div>
        </div>
      )}
    </div>
  );
}
