"use client";

import * as React from "react";
import { Trash2, Loader2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { deleteIntegration } from "../service";
import { toast } from "sonner";
import type { Integration } from "../validations";

interface IntegrationDeleteDialogProps {
  integration: Integration;
  onSuccess?: () => void;
}

export function IntegrationDeleteDialog({ integration, onSuccess }: IntegrationDeleteDialogProps) {
  const [open, setOpen] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  const handleDelete = async () => {
    setIsLoading(true);
    try {
      const result = await deleteIntegration(integration.id);
      if (result.success) {
        toast.success("인터페이스가 성공적으로 삭제되었습니다.");
        setOpen(false);
        if (onSuccess) {
          onSuccess();
        }
      } else {
        toast.error(result.error || "삭제 중 오류가 발생했습니다.");
      }
    } catch (error) {
      console.error("인터페이스 삭제 오류:", error);
      toast.error("인터페이스 삭제에 실패했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700">
          <Trash2 className="mr-2 h-4 w-4" />
          삭제
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>인터페이스 삭제</DialogTitle>
          <DialogDescription>
            정말로 이 인터페이스를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="rounded-lg border p-4">
            <h4 className="font-medium mb-2">삭제할 인터페이스 정보</h4>
            <div className="space-y-2 text-sm">
              <div>
                <span className="font-medium">코드:</span> {integration.code}
              </div>
              <div>
                <span className="font-medium">이름:</span> {integration.name}
              </div>
              <div>
                <span className="font-medium">타입:</span> {integration.type}
              </div>
              <div>
                <span className="font-medium">소스 시스템:</span> {integration.sourceSystem}
              </div>
              <div>
                <span className="font-medium">타겟 시스템:</span> {integration.targetSystem}
              </div>
              <div>
                <span className="font-medium">상태:</span> {integration.status}
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={handleCancel}
            disabled={isLoading}
          >
            취소
          </Button>
          <Button
            type="button"
            variant="destructive"
            onClick={handleDelete}
            disabled={isLoading}
          >
            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            {isLoading ? "삭제 중..." : "삭제"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}