import React, { useState } from 'react';
import { Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';
import { useNavigate } from 'react-router-dom';
import { resetAllStorageData } from '@/utils/storageUtils';
import { 
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogClose
} from '@/components/ui/dialog';

const DataResetSection = () => {
  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
  const { toast } = useToast();
  const navigate = useNavigate();

  const handleResetAllData = () => {
    // 데이터 초기화 수행
    try {
      resetAllStorageData();
      toast({
        title: "모든 데이터가 초기화되었습니다.",
        description: "모든 예산, 지출 내역, 설정이 초기화되었습니다.",
      });
      setIsResetDialogOpen(false);
      // 초기화 후 설정 페이지로 이동
      setTimeout(() => navigate('/settings'), 1000);
    } catch (error) {
      console.error('데이터 초기화 실패:', error);
      toast({
        title: "데이터 초기화 실패",
        description: "데이터를 초기화하는 중 문제가 발생했습니다.",
        variant: "destructive",
      });
    }
  };

  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">모든 예산, 지출 내역, 설정이 초기화됩니다.</p>
          </div>
        </div>
        <Button 
          variant="destructive" 
          className="w-full mt-4"
          onClick={() => setIsResetDialogOpen(true)}
        >
          모든 데이터 초기화
        </Button>
      </div>

      {/* Reset Dialog */}
      <Dialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>정말 모든 데이터를 초기화하시겠습니까?</DialogTitle>
            <DialogDescription>
              이 작업은 되돌릴 수 없으며, 모든 예산, 지출 내역, 설정이 영구적으로 삭제됩니다.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="flex flex-col sm:flex-row gap-2 sm:gap-0">
            <DialogClose asChild>
              <Button variant="outline" className="sm:mr-2">취소</Button>
            </DialogClose>
            <Button 
              variant="destructive" 
              onClick={handleResetAllData}
            >
              확인, 모든 데이터 초기화
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default DataResetSection;