
import { useState, useEffect } from 'react';
import { getLastSyncTime } from '@/utils/syncUtils';

/**
 * 동기화 상태 관리를 위한 커스텀 훅
 */
export const useSyncStatus = () => {
  const [lastSync, setLastSync] = useState<string | null>(getLastSyncTime());
  
  // 마지막 동기화 시간 포맷팅
  const formatLastSyncTime = (): string => {
    if (!lastSync) {
      return '없음';
    }

    try {
      const date = new Date(lastSync);
      
      // 유효한 날짜인지 확인
      if (isNaN(date.getTime())) {
        return '없음';
      }
      
      // 오늘 날짜인 경우
      const today = new Date();
      const isToday = date.getDate() === today.getDate() &&
                     date.getMonth() === today.getMonth() &&
                     date.getFullYear() === today.getFullYear();
      
      if (isToday) {
        // 시간만 표시
        return `오늘 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
      }
      
      // 어제 날짜인 경우
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);
      const isYesterday = date.getDate() === yesterday.getDate() &&
                         date.getMonth() === yesterday.getMonth() &&
                         date.getFullYear() === yesterday.getFullYear();
      
      if (isYesterday) {
        return `어제 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
      }
      
      // 그 외 날짜
      return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
    } catch (error) {
      console.error('날짜 포맷 오류:', error);
      return '없음';
    }
  };
  
  // 동기화 시간이 변경될 때 상태 업데이트
  useEffect(() => {
    console.log('useSyncStatus 훅 초기화, 현재 마지막 동기화 시간:', lastSync);
    
    const updateLastSyncTime = (event?: Event | CustomEvent) => {
      const newTime = getLastSyncTime();
      const eventDetails = event instanceof CustomEvent ? ` (이벤트 상세: ${JSON.stringify(event.detail)})` : '';
      console.log(`마지막 동기화 시간 업데이트됨: ${newTime} ${eventDetails}`);
      setLastSync(newTime);
    };
    
    // 이벤트 리스너 등록 - 커스텀 이벤트 사용
    window.addEventListener('syncTimeUpdated', updateLastSyncTime);
    
    // 스토리지 이벤트도 모니터링
    const handleStorageChange = (event: StorageEvent) => {
      if (event.key === 'lastSync' || event.key === null) {
        console.log('스토리지 변경 감지 (lastSync):', event.newValue);
        updateLastSyncTime();
      }
    };
    
    window.addEventListener('storage', handleStorageChange);
    
    // 동기화 완료 이벤트도 모니터링 (새로 추가)
    window.addEventListener('syncComplete', updateLastSyncTime);
    
    // 초기 상태 업데이트 
    updateLastSyncTime();
    
    // 1초마다 업데이트 상태 확인 (문제 해결을 위한 임시 방안)
    const checkInterval = setInterval(() => {
      const currentTime = getLastSyncTime();
      if (currentTime !== lastSync) {
        console.log('주기적 확인에서 동기화 시간 변경 감지:', currentTime);
        setLastSync(currentTime);
      }
    }, 1000);
    
    return () => {
      window.removeEventListener('syncTimeUpdated', updateLastSyncTime);
      window.removeEventListener('storage', handleStorageChange);
      window.removeEventListener('syncComplete', updateLastSyncTime);
      clearInterval(checkInterval);
    };
  }, [lastSync]);
  
  return {
    lastSync,
    formatLastSyncTime
  };
};
