import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { AlertTriangle, X } from 'lucide-react'
import { lockBodyScroll, unlockBodyScroll } from '../utils/lockBodyScroll'
import styles from './ConfirmDeleteModal.module.css'

interface ConfirmDeleteModalProps {
  open: boolean
  title: string
  message: string
  onConfirm: () => void
  onCancel: () => void
}

const ANIMATION_MS = 220

export function ConfirmDeleteModal({
  open,
  title,
  message,
  onConfirm,
  onCancel,
}: ConfirmDeleteModalProps) {
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const onCancelRef = useRef(onCancel)
  onCancelRef.current = onCancel

  useEffect(() => {
    if (open) {
      setMounted(true)
      setClosing(false)
    } else if (mounted) {
      setClosing(true)
      const timer = setTimeout(() => {
        setMounted(false)
        setClosing(false)
      }, ANIMATION_MS)
      return () => clearTimeout(timer)
    }
  }, [open, mounted])

  useEffect(() => {
    if (!mounted || closing) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onCancelRef.current()
    }
    lockBodyScroll()
    document.addEventListener('keydown', onKey)
    return () => {
      unlockBodyScroll()
      document.removeEventListener('keydown', onKey)
    }
  }, [mounted, closing])

  if (!mounted) return null

  return createPortal(
    <div
      className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
      onClick={onCancel}
    >
      <div
        className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
        onClick={(e) => e.stopPropagation()}
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="confirm-delete-title"
      >
        <div className={styles.iconWrap}>
          <AlertTriangle size={28} />
        </div>

        <h3 id="confirm-delete-title" className={styles.title}>
          {title}
        </h3>
        <p className={styles.message}>{message}</p>

        <div className={styles.actions}>
          <button type="button" className={styles.cancelBtn} onClick={onCancel}>
            Cancel
          </button>
          <button type="button" className={styles.deleteBtn} onClick={onConfirm}>
            Delete
          </button>
        </div>

        <button className={styles.closeBtn} onClick={onCancel} aria-label="Close">
          <X size={18} />
        </button>
      </div>
    </div>,
    document.body,
  )
}