'use client';

interface DeleteModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  description?: string;
  loading?: boolean;
}

export function DeleteModal({
  isOpen,
  onClose,
  onConfirm,
  title = '¿Eliminar conversación?',
  description = 'Esta acción eliminará permanentemente toda la conversación y su historial de mensajes. No se puede deshacer.',
  loading = false,
}: DeleteModalProps) {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      {/* Overlay */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />

      {/* Modal Card */}
      <div
        className="relative glass-card p-6 sm:p-8 max-w-sm w-full panel animate-slide-up"
        style={{ padding: '32px' }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Warning Icon */}
        <div className="w-14 h-14 mx-auto mb-5 rounded-2xl flex items-center justify-center"
             style={{ background: 'rgba(241, 100, 124, 0.08)', border: '1px solid rgba(241, 100, 124, 0.15)' }}>
          <svg className="w-7 h-7" style={{ color: 'var(--rose)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
            <path strokeLinecap="round" strokeLinejoin="round"
              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
        </div>

        <h3 className="text-base font-bold text-center text-slate-100 mb-2">{title}</h3>
        <p className="text-xs text-center text-slate-400 mb-7 leading-relaxed font-semibold">{description}</p>

        <div className="flex gap-3">
          <button
            onClick={onClose}
            disabled={loading}
            className="flex-1 py-2.5 rounded-xl text-xs font-bold transition-all duration-200 cursor-pointer"
            style={{ background: 'var(--bg-input)', color: 'var(--text-dim)', border: '1px solid var(--border-strong)' }}
          >
            Cancelar
          </button>
          <button
            onClick={onConfirm}
            disabled={loading}
            className="flex-1 btn-danger flex items-center justify-center gap-2 text-xs font-bold"
            style={{ padding: '10px 14px' }}
          >
            {loading ? (
              <>
                <div className="spinner-epic" style={{ width: '14px', height: '14px', borderWidth: '2px', borderTopColor: '#fff' }} />
                Eliminando…
              </>
            ) : (
              'Eliminar'
            )}
          </button>
        </div>
      </div>
    </div>
  );
}