import { ReactNode } from 'react'
import { AlertTriangle, CheckCircle2, HelpCircle } from 'lucide-react'
import { Modal } from './ui/Modal'
import { Button } from './ui/Button'

interface ConfirmDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: () => void
  title: string
  message: string
  // Zusatz unter der Meldung — z. B. ein Kasten mit der Größe der Rohdaten,
  // die beim Entfernen liegen bleiben, samt Wahl „mitlöschen".
  extra?: ReactNode
  confirmText?: string
  cancelText?: string
  type?: 'warning' | 'info' | 'success'
}

export default function ConfirmDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  extra,
  confirmText = 'Bestätigen',
  cancelText = 'Abbrechen',
  type = 'info',
}: ConfirmDialogProps) {

  const getIcon = () => {
    switch (type) {
      case 'warning':
        return <AlertTriangle className="text-amber-500 w-8 h-8 flex-shrink-0" />
      case 'success':
        return <CheckCircle2 className="text-emerald-500 w-8 h-8 flex-shrink-0" />
      default:
        return <HelpCircle className="text-indigo-500 w-8 h-8 flex-shrink-0" />
    }
  }

  const getConfirmVariant = () => {
    switch (type) {
      case 'warning':
        return 'amber'
      case 'success':
        return 'primary'
      default:
        return 'primary'
    }
  }

  return (
    <Modal isOpen={isOpen} onClose={onClose} maxWidth="md">
      <div className="flex items-start gap-4">
        {getIcon()}
        <div className="space-y-2 flex-1">
          <h2 className="text-lg font-bold text-slate-900 dark:text-slate-100">
            {title}
          </h2>
          <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
            {message}
          </p>
          {extra}
        </div>
      </div>

      <div className="mt-6 flex justify-end gap-3 border-t border-slate-200 dark:border-slate-800 pt-4">
        <Button variant="secondary" onClick={onClose}>
          {cancelText}
        </Button>
        <Button variant={getConfirmVariant()} onClick={onConfirm}>
          {confirmText}
        </Button>
      </div>
    </Modal>
  )
}