// delete-template-dialog.tsx
"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 TemplateListView } from "@/db/schema"

import { deleteTemplate, bulkDeleteTemplates } from "../service"

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

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

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

  function onDelete() {
    startDeleteTransition(async () => {
      let result

      if (isMultiple) {
        const ids = templates.map(t => t.id)
        result = await bulkDeleteTemplates(ids)
      } else {
        result = await deleteTemplate(templates[0].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((template) => (
                <div key={template.id} className="text-xs text-muted-foreground">
                  <div className="font-medium">{template.name}</div>
                  <div>Slug: <code className="bg-background px-1 rounded">{template.slug}</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>
  )
}