import React, { useState } from 'react';
import { Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useAuth } from '@/contexts/auth/AuthProvider';
import { useDataReset } from '@/hooks/useDataReset';
import DataResetDialog from './DataResetDialog';
import { isSyncEnabled } from '@/utils/sync/syncSettings';
import { toast } from '@/hooks/useToast.wrapper';

const DataResetSection = () => {
  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
  const { user } = useAuth();
  const { isResetting, resetAllData } = useDataReset();
  const syncEnabled = isSyncEnabled();

  const handleResetAllData = async () => {
    await resetAllData();
    setIsResetDialogOpen(false);
    
    // 알림 표시
    toast({
      title: "데이터 초기화 완료",
      description: "모든 데이터가 초기화되었습니다.",
    });
    
    // 초기화 후 페이지 새로고침
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  };

  return (
    <>
      <div className="neuro-flat p-6 mb-8">
        <div className="flex items-start space-x-4">
          <div className="neuro-pressed p-3 rounded-full text-red-500 shrink-0 mt-1">
            <Trash2 size={20} />
          </div>
          <div className="text-left">
            <h3 className="font-medium">데이터 초기화</h3>
            <p className="text-xs text-gray-500 mt-1">
              {user 
                ? "로컬 및 클라우드의 모든 예산, 지출 내역이 초기화됩니다. 동기화 설정은 비활성화됩니다."
                : "모든 예산, 지출 내역, 설정이 초기화됩니다."}
            </p>
          </div>
        </div>
        <Button 
          variant="destructive" 
          className="w-full mt-4"
          onClick={() => setIsResetDialogOpen(true)}
          disabled={isResetting}
        >
          모든 데이터 초기화
        </Button>
      </div>

      <DataResetDialog
        isOpen={isResetDialogOpen}
        onOpenChange={setIsResetDialogOpen}
        onConfirm={handleResetAllData}
        isResetting={isResetting}
        isLoggedIn={!!user}
        syncEnabled={syncEnabled}
      />
    </>
  );
};

export default DataResetSection;