import { useCallback, useEffect, useRef } from 'react'; type SaveRequest = { data: T; onResponse?: (response: R) => void; }; export const useAutoSave = ( onSave: (data: T) => Promise, options: { delay?: number } = {}, ) => { const { delay = 2000 } = options; const saveTimeoutRef = useRef(); const saveQueueRef = useRef[]>([]); const isProcessingRef = useRef(false); const processQueue = async () => { if (isProcessingRef.current || saveQueueRef.current.length === 0) { return; } isProcessingRef.current = true; while (saveQueueRef.current.length > 0) { const request = saveQueueRef.current.shift()!; try { const response = await onSave(request.data); request.onResponse?.(response); } catch (error) { console.error('Auto-save failed:', error); } } isProcessingRef.current = false; }; const saveFormData = async (data: T, onResponse?: (response: R) => void) => { saveQueueRef.current.push({ data, onResponse }); await processQueue(); }; const scheduleSave = useCallback( (data: T, onResponse?: (response: R) => void) => { if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } saveTimeoutRef.current = setTimeout(() => void saveFormData(data, onResponse), delay); }, [delay], ); useEffect(() => { return () => { if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } }; }, []); return { scheduleSave }; };