"use client"

import * as React from "react"
import { Loader, Trash } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { type ApprovalTemplate } from "@/lib/approval-template/service"

import { deleteApprovalTemplate } from "../service"

interface DeleteApprovalTemplateDialogProps extends React.ComponentPropsWithRef<typeof Dialog> {
  templates: ApprovalTemplate[]
  showTrigger?: boolean
  onSuccess?: () => void
}

export function DeleteApprovalTemplateDialog({
  templates,
  showTrigger = true,
  onSuccess,
  ...props
}: DeleteApprovalTemplateDialogProps) {
  const [isDeletePending, startDeleteTransition] = React.useTransition()

  const isMultiple = templates.length > 1
  const templateName = isMultiple ? `${templates.length}개 템플릿` : templates[0]?.name

  function onDelete() {
    startDeleteTransition(async () => {
      if (templates.length === 0) return

      // 여러 개면 순차 삭제 (간단히 처리)
      for (const t of templates) {
        const result = await deleteApprovalTemplate(t.id)
        if (result.error) {
          toast.error(result.error)
          return
        }
      }

      props.onOpenChange?.(false)
      onSuccess?.()
      toast.success(
        isMultiple ? `${templates.length}개 템플릿이 삭제되었습니다` : "템플릿이 삭제되었습니다",
      )

      // 새로고침으로 반영
      window.location.reload()
    })
  }

  return (
    <Dialog {...props}>
      {showTrigger && (
        <DialogTrigger asChild>
          <Button
            variant="outline"
            size="sm"
            className="text-destructive hover:text-destructive"
          >
            <Trash className="mr-2 size-4" aria-hidden="true" />
            삭제
          </Button>
        </DialogTrigger>
      )}
      <DialogContent>
        <DialogHeader>
          <DialogTitle>템플릿 삭제 확인</DialogTitle>
          <DialogDescription>
            정말로 <strong>{templateName}</strong>을(를) 삭제하시겠습니까?
            {!isMultiple && (
              <>
                <br />이 작업은 되돌릴 수 없습니다.
              </>
            )}
          </DialogDescription>
        </DialogHeader>

        {templates.length > 0 && (
          <div className="rounded-lg bg-muted p-3 max-h-40 overflow-y-auto">
            <h4 className="text-sm font-medium mb-2">삭제될 템플릿</h4>
            <div className="space-y-1">
              {templates.map((t) => (
                <div key={t.id} className="text-xs text-muted-foreground">
                  <div className="font-medium">{t.name}</div>
                  <div>ID: <code className="bg-background px-1 rounded">{t.id}</code></div>
                </div>
              ))}
            </div>
          </div>
        )}

        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => props.onOpenChange?.(false)}
            disabled={isDeletePending}
          >
            취소
          </Button>
          <Button
            variant="destructive"
            onClick={onDelete}
            disabled={isDeletePending}
          >
            {isDeletePending && <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />}
            {isMultiple ? `${templates.length}개 삭제` : "삭제"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}