import React, { useState, useEffect } from 'react';
import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
import { fetchRegistrationFileGroups } from '@/app/actions/registerFileGroupAction';
import DocusealBuilder from '@/components/DocusealBuilder'; // Import du composant wrapper
import logger from '@/utils/logger';
import { BE_DOCUSEAL_GET_JWT, BASE_URL } from '@/utils/Url';
import Button from '@/components/Button'; // Import du composant Button
import MultiSelect from '@/components/MultiSelect'; // Import du composant MultiSelect
import { createRegistrationTemplates } from '@/app/actions/subscriptionAction'; // Import de la fonction createRegistrationTemplates
import { useCsrfToken } from '@/context/CsrfContext';

export default function FileUpload({ handleCreateTemplateMaster, fileToEdit = null }) {
  const [isRequired, setIsRequired] = useState(false); // État pour le toggle isRequired
  const [order, setOrder] = useState(0);
  const [groups, setGroups] = useState([]);
  const [token, setToken] = useState(null);
  const [templateMaster, setTemplateMaster] = useState(null);
  const [uploadedFileName, setUploadedFileName] = useState('');
  const [selectedGroups, setSelectedGroups] = useState([]);
  const [guardianEmails, setGuardianEmails] = useState([]);
  const [registrationFormIds, setRegistrationFormIds] = useState([]);

  const csrfToken = useCsrfToken();

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

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

  useEffect(() => {
    const body = fileToEdit
      ? JSON.stringify({
          user_email: 'n3wt.school@gmail.com',
          template_id: fileToEdit.template_id
        })
      : JSON.stringify({
          user_email: 'n3wt.school@gmail.com'
        });
  
    fetch('/api/docuseal/generateToken', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: body,
    })
    .then((response) => response.json())
    .then((data) => {
      setToken(data.token);
    })
    .catch((error) => console.error(error));
  }, [fileToEdit]);

  const handleFileNameChange = (event) => {
    setUploadedFileName(event.target.value);
  };

  const handleGroupChange = (selectedGroups) => {
    setSelectedGroups(selectedGroups);
  
    const emails = selectedGroups.flatMap(group => group.registration_forms.flatMap(form => form.guardians.map(guardian => guardian.email)));
    setGuardianEmails(emails); // Mettre à jour la variable d'état avec les emails des guardians
  
    const registrationFormIds = selectedGroups.flatMap(group => group.registration_forms.map(form => form.student_id));
    setRegistrationFormIds(registrationFormIds); // Mettre à jour la variable d'état avec les IDs des dossiers d'inscription
  
    logger.debug('Emails des Guardians associés aux groupes sélectionnés:', emails);
    logger.debug('IDs des dossiers d\'inscription associés aux groupes sélectionnés:', registrationFormIds);
  };

  const handleLoad = (detail) => {
    const templateId = detail?.id;
    setTemplateMaster(detail);
    logger.debug('Master template created with ID:', templateId);
  }

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

  const handleSubmit = () => {
    logger.debug('Création du template master:', templateMaster?.id);
    handleCreateTemplateMaster({
      name: uploadedFileName,
      group_ids: selectedGroups.map(group => group.id),
      template_id: templateMaster?.id
    });

    guardianEmails.forEach((email, index) => {
      cloneTemplate(templateMaster?.id, email)
        .then(clonedDocument => {

          // Sauvegarde des templates clonés dans la base de données
          const data = {
            name: `clone_${clonedDocument.id}`,
            template_id: clonedDocument.id,
            master: templateMaster?.id,
            registration_form: registrationFormIds[index]
          };

          createRegistrationTemplates(data, csrfToken)
            .then(response => {
              logger.debug('Template enregistré avec succès:', response);
            })
            .catch(error => {
              logger.error('Erreur lors de l\'enregistrement du template:', error);
            });


          // Logique pour envoyer chaque template au submitter
          logger.debug('Sending template to:', email);
        })
        .catch(error => {
          logger.error('Error during cloning or sending:', error);
        });
    });
  };

  const cloneTemplate = (templateId, email) => {
    return fetch('/api/docuseal/cloneTemplate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        templateId,
        email
      })
    })
    .then(response => {
      if (!response.ok) {
        return response.json().then(err => { throw new Error(err.message); });
      }
      return response.json();
    })
    .then(data => {
      logger.debug('Template cloned successfully:', data);
      return data;
    })
    .catch(error => {
      console.error('Error cloning template:', error);
      throw error;
    });
  };

  return (
    <div className="h-full flex flex-col mt-4 space-y-4">
      <div className="grid grid-cols-10 gap-4 items-start">
        <div className="col-span-2">
          <MultiSelect
            name="groups"
            label="Sélection de groupes de fichiers"
            options={groups}
            selectedOptions={selectedGroups}
            onChange={handleGroupChange}
            errorMsg={null}
          />
        </div>
        <div className="col-span-7">
          {token && (
            <DocusealBuilder 
              token={token} 
              headers={{
                'Authorization': `Bearer ${token}`
              }}
              withSendButton={false}
              withSignYourselfButton={false}
              autosave={true}
              language={'fr'}
              onLoad={handleLoad}
              onUpload={handleUpload}
              className="h-full overflow-auto" // Ajouter overflow-auto pour permettre le défilement
              style={{ maxHeight: '70vh' }} // Limiter la hauteur maximale du composant
              // Il faut auter l'host correspondant (une fois passé en HTTPS)
              //host="docuseal:3001"
            />
          )}
        </div>
        <div className="col-span-1 flex justify-end">
          <Button
            text="Valider"
            onClick={handleSubmit}
            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
              (uploadedFileName === '' || selectedGroups.length === 0)
                ? "bg-gray-300 text-gray-700 cursor-not-allowed"
                : "bg-emerald-500 text-white hover:bg-emerald-600"
            }`}
            primary
            disabled={uploadedFileName === '' || selectedGroups.length === 0}
          />
        </div>
      </div>
    </div>
  );
}