
import React from 'react';
import { CloudOff, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogClose } from '@/components/ui/dialog';

interface DataResetDialogProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => Promise<void>;
  isResetting: boolean;
  isLoggedIn: boolean;
  syncEnabled: boolean;
}

const DataResetDialog: React.FC<DataResetDialogProps> = ({
  isOpen,
  onOpenChange,
  onConfirm,
  isResetting,
  isLoggedIn,
  syncEnabled
}) => {
  return <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>정말 모든 데이터를 초기화하시겠습니까?</DialogTitle>
          <DialogDescription>
            {isLoggedIn ? <>
                이 작업은 되돌릴 수 없으며, 로컬 및 클라우드에 저장된 모든 예산, 지출 내역이 영구적으로 삭제됩니다.
                <div className="flex items-center mt-2 text-amber-600">
                  <CloudOff size={16} className="mr-2" /> 
                  클라우드 데이터도 함께 삭제됩니다.
                </div>
                {syncEnabled && (
                  <div className="mt-2 text-amber-600">
                    동기화 설정이 비활성화됩니다.
                  </div>
                )}
              </> : "이 작업은 되돌릴 수 없으며, 모든 예산, 지출 내역, 설정이 영구적으로 삭제됩니다."}
            <div className="mt-2">
              단, '환영합니다' 화면 표시 설정과 로그인 상태는 유지됩니다.
            </div>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter className="flex flex-col sm:flex-row gap-2 sm:gap-0">
          <DialogClose asChild>
            <Button variant="outline" className="sm:mr-2" disabled={isResetting}>취소</Button>
          </DialogClose>
          <Button variant="destructive" onClick={onConfirm} disabled={isResetting}>
            {isResetting ? <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                초기화 중...
              </> : isLoggedIn ? '확인, 로컬 및 클라우드 데이터 초기화' : '확인, 모든 데이터 초기화'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>;
};

export default DataResetDialog;
