import { useEffect, useRef, type ReactNode } from 'react'
import { AlertTriangle } from 'lucide-react'
import { Button } from './Button'

/**
 * Универсальный confirm-диалог для destructive actions. Заменяет нативный
 * `window.confirm()` — даёт собственный UI (поверх Modal), Esc=отмена, фокус на
 * Cancel (чтобы случайный Enter не подтверждал удаление).
 *
 * Использование: держим стейтом `{ open, payload }`, в `onConfirm` запускаем
 * мутацию, в `onCancel` — `setOpen(false)`. Текст description — конкретный, с
 * именем сущности («Удалить товар «Молоко 3.2%»? Действие необратимо»).
 *
 * Варианты:
 *  - tone='danger' (default): красная кнопка справа, иконка треугольник
 *  - tone='warning': жёлтая кнопка («Снять проведение»), всё ещё деструктивно
 *    но не уничтожающе. Иконка та же.
 */
interface ConfirmDialogProps {
  open: boolean
  title: string
  description?: ReactNode
  confirmLabel?: string
  cancelLabel?: string
  tone?: 'danger' | 'warning'
  busy?: boolean
  onConfirm: () => void
  onCancel: () => void
}

export function ConfirmDialog({
  open, title, description, confirmLabel = 'Удалить', cancelLabel = 'Отмена',
  tone = 'danger', busy = false, onConfirm, onCancel,
}: ConfirmDialogProps) {
  const cancelBtnRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') { e.preventDefault(); onCancel() }
      else if (e.key === 'Enter') { e.preventDefault(); if (!busy) onConfirm() }
    }
    document.addEventListener('keydown', onKey)
    // Фокус на Cancel по умолчанию — безопасно для случайного Enter.
    cancelBtnRef.current?.focus()
    return () => document.removeEventListener('keydown', onKey)
  }, [open, busy, onCancel, onConfirm])

  if (!open) return null

  const iconColor = tone === 'danger' ? 'text-red-600' : 'text-amber-600'
  const iconBg = tone === 'danger' ? 'bg-red-50 dark:bg-red-900/20' : 'bg-amber-50 dark:bg-amber-900/20'
  const confirmVariant = tone === 'danger' ? 'danger' : 'primary'

  return (
    <div
      className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm"
      onClick={onCancel}
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-dialog-title"
    >
      <div
        className="w-full max-w-md bg-white dark:bg-slate-900 rounded-xl shadow-xl flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex gap-3 px-5 pt-5">
          <div className={`shrink-0 w-10 h-10 rounded-full ${iconBg} flex items-center justify-center ${iconColor}`}>
            <AlertTriangle className="w-5 h-5" />
          </div>
          <div className="flex-1 min-w-0">
            <h2 id="confirm-dialog-title" className="font-semibold text-slate-900 dark:text-slate-100">{title}</h2>
            {description && (
              <div className="mt-1 text-sm text-slate-600 dark:text-slate-400">{description}</div>
            )}
          </div>
        </div>
        <div className="px-5 py-4 flex flex-wrap justify-end gap-2">
          <Button ref={cancelBtnRef} variant="secondary" mutating={false} onClick={onCancel} disabled={busy}>
            {cancelLabel}
          </Button>
          <Button variant={confirmVariant} onClick={onConfirm} disabled={busy}>
            {busy ? '…' : confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  )
}
