"use client"

import React, { useState, useEffect } from "react"
import { createPortal } from "react-dom"
import { cn } from "@/lib/utils"

interface CustomAlertDialogProps {
  title: string
  description: string
  cancelText?: string
  confirmText?: string
  onCancel?: () => void
  onConfirm?: () => void
  variant?: "default" | "destructive"
}

export function CustomAlertDialogTrigger({
  children,
  dialogProps,
}: {
  children: React.ReactNode
  dialogProps: CustomAlertDialogProps
}) {
  const [isOpen, setIsOpen] = useState(false)

  const openDialog = () => setIsOpen(true)
  const closeDialog = () => setIsOpen(false)

  const handleCancel = () => {
    dialogProps.onCancel?.()
    closeDialog()
  }

  const handleConfirm = () => {
    dialogProps.onConfirm?.()
    closeDialog()
  }

  return (
    <>
      {React.cloneElement(children as React.ReactElement, { onClick: openDialog })}
      {isOpen && (
        <CustomAlertDialog {...dialogProps} onCancel={handleCancel} onConfirm={handleConfirm} isOpen={isOpen} />
      )}
    </>
  )
}

function CustomAlertDialog({
  title,
  description,
  cancelText = "Cancel",
  confirmText = "Confirm",
  onCancel,
  onConfirm,
  variant = "default",
  isOpen,
}: CustomAlertDialogProps & { isOpen: boolean }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    return () => setMounted(false)
  }, [])

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
    }
  }, [isOpen])

  const handleBackdropClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onCancel?.()
    }
  }

  const dialogContent = (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={handleBackdropClick}>
      <div
        className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md mx-4 overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-6">
          <h2 className="text-xl font-semibold mb-2">{title}</h2>
          <p className="text-gray-500 dark:text-gray-400 mb-6">{description}</p>

          <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2">
            <button
              onClick={onCancel}
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium"
            >
              {cancelText}
            </button>
            <button
              onClick={onConfirm}
              className={cn(
                "px-4 py-2 rounded-md text-sm font-medium text-white",
                variant === "destructive" ? "bg-red-600 hover:bg-red-700" : "bg-blue-600 hover:bg-blue-700",
              )}
            >
              {confirmText}
            </button>
          </div>
        </div>
      </div>
    </div>
  )

  if (!mounted) return null

  return createPortal(dialogContent, document.body)
}