import React, { useEffect } from 'react';
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { CloudUpload } from "lucide-react";
import { useSyncSettings } from '@/hooks/useSyncSettings';
import SyncStatus from '@/components/sync/SyncStatus';
import SyncExplanation from '@/components/sync/SyncExplanation';
import { isSyncEnabled } from '@/utils/sync/syncSettings';

const SyncSettings = () => {
  const {
    enabled,
    syncing,
    user,
    lastSync,
    handleSyncToggle,
    handleManualSync
  } = useSyncSettings();

  // 동기화 설정 변경 모니터링
  useEffect(() => {
    const checkSyncStatus = () => {
      const currentStatus = isSyncEnabled();
      console.log('현재 동기화 상태:', currentStatus ? '활성화됨' : '비활성화됨');
    };
    
    // 초기 상태 확인
    checkSyncStatus();
    
    // 스토리지 변경 이벤트에도 동기화 상태 확인 추가
    const handleStorageChange = () => {
      checkSyncStatus();
    };
    
    window.addEventListener('storage', handleStorageChange);
    window.addEventListener('auth-state-changed', handleStorageChange);
    
    return () => {
      window.removeEventListener('storage', handleStorageChange);
      window.removeEventListener('auth-state-changed', handleStorageChange);
    };
  }, []);

  return (
    <div className="space-y-6">
      {/* 동기화 토글 컨트롤 */}
      <div className="flex items-center justify-between">
        <div className="space-y-0.5">
          <div className="flex items-center gap-2">
            <CloudUpload className="h-5 w-5 text-neuro-income" />
            <Label htmlFor="sync-toggle" className="text-base font-medium">
              데이터 클라우드 동기화
            </Label>
          </div>
          <p className="text-sm text-muted-foreground">
            여러 기기에서 예산 및 지출 데이터를 동기화합니다.
          </p>
        </div>
        <Switch
          id="sync-toggle"
          checked={enabled}
          onCheckedChange={handleSyncToggle}
          className="data-[state=checked]:bg-neuro-income"
          disabled={!user && enabled} // 사용자가 로그아웃 상태이면서 동기화가 켜져있을 때 비활성화
        />
      </div>
      
      {/* 동기화 상태 및 동작 */}
      <SyncStatus 
        enabled={enabled}
        syncing={syncing}
        lastSync={lastSync}
        user={user}
        onManualSync={handleManualSync}
      />

      {/* 동기화 설명 */}
      <SyncExplanation enabled={enabled} />
    </div>
  );
};

export default SyncSettings;