"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { useRouter } from "next/navigation"
import { CheckCircle, FileText, Loader, AlertTriangle } from "lucide-react"
import { updateVendorDocumentStatus } from "../service"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface UpdateVendorDocumentStatusButtonProps {
  vendorDocumentId: number
  documentId: number
  vendorId: number
  currentStatus: "draft" | "approved" | "reviewing" // reviewing 상태 추가
}

export function UpdateVendorDocumentStatusButton({
  vendorDocumentId,
  documentId,
  vendorId,
  currentStatus
}: UpdateVendorDocumentStatusButtonProps) {

  console.log(currentStatus)

  const [isLoading, setIsLoading] = useState(false)
  const [isOpen, setIsOpen] = useState(false)
  const router = useRouter()

  // 토글할 새로운 상태 결정
  const newStatus = currentStatus === "approved" ? "draft" : "approved"
  
  // 상태에 따른 버튼 텍스트
  const buttonText = currentStatus === "approved" 
    ? "협의 취소" 
    : "협의 완료 처리"
  
  // 상태에 따른 다이얼로그 제목
  const dialogTitle = newStatus === "approved"
    ? "협의를 완료 처리하시겠습니까?"
    : "협의 완료를 취소하시겠습니까?"
  
  // 상태에 따른 다이얼로그 설명
  const dialogDescription = newStatus === "approved"
    ? "협의가 완료 처리되면 협력업체가 계약서에 서명할 수 있게 됩니다. 모든 조항 검토가 완료되었는지 확인해주세요."
    : "협의 완료를 취소하면 협력업체가 계약서에 서명할 수 없게 됩니다. 추가 수정이 필요한 경우에만 취소해주세요."
  
  // 상태에 따른 토스트 메시지
  const successMessage = newStatus === "approved"
    ? "협의가 완료 처리되었습니다. 협력업체가 서명할 수 있습니다."
    : "협의 완료가 취소되었습니다. 협력업체가 서명할 수 없습니다."

  const handleUpdateStatus = async () => {
    try {
      setIsLoading(true)
      setIsOpen(false)
      
      // 서버 액션 호출 - 새로운 상태로 업데이트
      const result = await updateVendorDocumentStatus({
        status: newStatus,
        vendorDocumentId,
        documentId,
        vendorId
      })

      if (!result.success) {
        throw new Error(result.error || "상태 업데이트 실패")
      }

      toast.success(successMessage)
      router.refresh() // 페이지 새로고침
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "상태 업데이트 중 오류가 발생했습니다")
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
      <AlertDialogTrigger asChild>
        <Button
          variant={currentStatus === "approved" ? "secondary" : "outline"}
          size="sm"
          disabled={isLoading}
          className={currentStatus === "approved" ? "bg-green-50 hover:bg-green-100 text-green-700" : ""}
        >
          {isLoading ? (
            <Loader className="h-4 w-4 mr-2 animate-spin" />
          ) : currentStatus === "approved" ? (
            <FileText className="h-4 w-4 mr-2" />
          ) : (
            <CheckCircle className="h-4 w-4 mr-2" />
          )}
          {buttonText}
        </Button>
      </AlertDialogTrigger>
      
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2">
            <AlertTriangle className="h-5 w-5 text-amber-500" />
            {dialogTitle}
          </AlertDialogTitle>
          <AlertDialogDescription className="space-y-2">
            <p>{dialogDescription}</p>
            {newStatus === "approved" && (
              <div className="bg-blue-50 border border-blue-200 rounded-md p-3 mt-3">
                <p className="text-sm text-blue-800">
                  <strong>확인사항:</strong>
                </p>
                <ul className="text-sm text-blue-700 mt-1 ml-4 list-disc">
                  <li>모든 필수 조항이 검토되었습니까?</li>
                  <li>협력업체와의 협의 내용이 모두 반영되었습니까?</li>
                  <li>법무팀 검토가 완료되었습니까?</li>
                </ul>
              </div>
            )}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>취소</AlertDialogCancel>
          <AlertDialogAction
            onClick={handleUpdateStatus}
            className={newStatus === "approved" ? "bg-green-600 hover:bg-green-700" : "bg-amber-600 hover:bg-amber-700"}
          >
            {newStatus === "approved" ? "완료 처리" : "완료 취소"}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}