"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Trash2 } from "lucide-react";
import { deleteComplianceQuestion } from "@/lib/compliance/services";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { complianceQuestions } from "@/db/schema/compliance";

interface ComplianceQuestionDeleteDialogProps {
  question: typeof complianceQuestions.$inferSelect;
  onSuccess?: () => void;
}

export function ComplianceQuestionDeleteDialog({ 
  question, 
  onSuccess 
}: ComplianceQuestionDeleteDialogProps) {
  const [open, setOpen] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const router = useRouter();

  const handleDelete = async () => {
    try {
      setIsLoading(true);
      
      await deleteComplianceQuestion(question.id);

      toast.success("질문이 성공적으로 삭제되었습니다.");
      setOpen(false);
      
      // 페이지 새로고침
      router.refresh();
      
      if (onSuccess) {
        onSuccess();
      }
    } catch (error) {
      console.error("Error deleting question:", error);
      toast.error("질문 삭제 중 오류가 발생했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="sm">
          <Trash2 className="h-4 w-4" />
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>질문 삭제</DialogTitle>
          <DialogDescription>
            이 질문을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
          </DialogDescription>
        </DialogHeader>
        
        <div className="py-4">
          <div className="bg-muted p-4 rounded-lg">
            <h4 className="font-medium mb-2">삭제될 질문:</h4>
            <p className="text-sm text-muted-foreground">
              <strong>질문 번호:</strong> {question.questionNumber}
            </p>
            <p className="text-sm text-muted-foreground">
              <strong>질문 내용:</strong> {question.questionText}
            </p>
            <p className="text-sm text-muted-foreground">
              <strong>질문 유형:</strong> {question.questionType}
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button 
            type="button" 
            variant="outline" 
            onClick={() => setOpen(false)}
            disabled={isLoading}
          >
            취소
          </Button>
          <Button 
            type="button" 
            variant="destructive" 
            onClick={handleDelete}
            disabled={isLoading}
          >
            {isLoading ? "삭제 중..." : "질문 삭제"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}