'use client'; // Ajoutez cette ligne pour marquer ce fichier comme un composant client

import React, { createContext, useContext, useState, useEffect } from 'react';
import { BE_AUTH_CSRF_URL } from '@/utils/Url';
import { setCsrfToken } from '@/utils/getCsrfToken';
import logger from '@/utils/logger';

const CsrfContext = createContext();

export const CsrfProvider = ({ children }) => {
  const [csrfToken, setCsrfTokenState] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Éviter les appels multiples si le token existe déjà
    if (csrfToken) return;

    fetch(`${BE_AUTH_CSRF_URL}`, {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((data) => {
        if (data && data.csrfToken) {
          setCsrfTokenState(data.csrfToken);
          setCsrfToken(data.csrfToken); // Définir le token CSRF global
          logger.debug('CSRF Token reçu:', data.csrfToken);
        }
      })
      .catch((error) => {
        logger.error('Error fetching CSRF token:', error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []); // Dépendance vide pour n'exécuter qu'une seule fois

  return (
    <CsrfContext.Provider value={csrfToken}>
      {!isLoading && children}
    </CsrfContext.Provider>
  );
};

export const useCsrfToken = () => {
  const context = useContext(CsrfContext);
  if (context === undefined) {
    throw new Error('useCsrfToken must be used within a CsrfProvider');
  }
  return context;
};